辣辣的草莓酱
辣辣的草莓酱

js+css实现瀑布流

瀑布流是一种很常见的布局，实现的方法也有很多，以下是仿照花瓣网的瀑布流展示，希望能帮到各位小主们。



<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Documenttitle>
	<style>
		html,body{
      
			background: #f5f5f5;
		}
		.wrapper {
      
			margin: 30px auto;
			position: relative;
		}

		.CascadeFlowItem {
      
			width: 236px;
			font-size: 12px;
			background-color: #fff;
			box-shadow: 0 1px 3px rgba(0, 0, 0, .02), 0 4px 8px rgba(0, 0, 0, .02);
			border-radius: 3px;
			overflow: hidden;
			-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .02), 0 4px 8px rgba(0, 0, 0, .02);
			-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .02), 0 4px 8px rgba(0, 0, 0, .02);
			position: absolute;
		}

		.img {
      
			width: 100%;
			height: auto;
		}

		.description {
      
			display: block;
			padding: 0 16px;
			margin: 10px 0;
			line-height: 1.35em;
			overflow: hidden;
			word-wrap: break-word;
		}

		.bottom_line {
      
			color: #999;
			border-top: 1px solid #F2F2F2;
			background: #FAFAFA;
			position: relative;
			height: 50px;
			display: flex;
			align-items: center;
			padding: 0 15px;
			box-sizing: border-box;
			background-color: #fff;

		}

		.bottom_line>a {
      
			color: #9E7E6B;
		}

		.author {
      
			max-width: 75px;
		}

		.sub_board {
      
			max-width: 75px;
		}

		.ellipsis {
      
			overflow: hidden;
			text-overflow: ellipsis;
			display: inline-block;
			white-space: nowrap;
			-webkit-line-clamp: 1;
		}

		.label {
      
			color: #999;
		}
	style>
head>

<body>
	<div class="container">
		<div class="wrapper">div>
	div>
	<script>
		let list = [
			{
      
				img: './images/1.png',
				description: "EE, M4 Miv4t",
				author: "懶懶懶",
				sub_board: "插画"
			},
			...等];
		let wrapper = document.getElementsByClassName('wrapper')[0];
		let wrapper_html = ``;
		for (var i = 0; i < list.length; i++) {
      
			wrapper_html = wrapper_html +
				`

					${
        list[i].img}">
					
${
        list[i].description}

					

						${
        list[i].author}
						 采集到 
						${
        list[i].sub_board}
					

				
`
		}
		wrapper.innerHTML = wrapper_html;

		function waterFall() {
      
			let bodyWidth = getSize().width - 300;
			let list = document.getElementsByClassName('CascadeFlowItem');
			let itemWidth = 236;//每个盒子的宽是固定的
			let wrapperTop = 30;
			let itemMarginRight = 20;//盒子与盒子之间的距离
			let itemMarginTop = 20;//盒子与盒子之间的距离
			let heightArr = [];//所有高度
			let rowHeightArr = [];//每一行的高度
			let col = Math.floor(bodyWidth / (itemWidth + itemMarginRight));//列数

			//console.log(list)
			for (var i = 0; i < list.length; i++) {
      
				heightArr.push(window.getComputedStyle(list[i]).height.split('px')[0] * 1);
			}
			for (var i = 0; i < list.length; i++) {
      
				if (i < col) {
      //确定第一行
					list[i].style.top = wrapperTop + 'px';
					list[i].style.left = itemWidth * i + itemMarginRight * i + 'px';
					rowHeightArr.push(heightArr[i]);
				} else {
      
					let minHeight = rowHeightArr[0];
					var index = 0;
					for (var j = 0; j < rowHeightArr.length; j++) {
      
						if (minHeight > rowHeightArr[j]) {
      
							minHeight = rowHeightArr[j];
							index = j;
						}
					}
					//设置其他行
					list[i].style.top = wrapperTop + minHeight + itemMarginTop + 'px';
					list[i].style.left = itemWidth * index + itemMarginRight * index + 'px';

					//更新最小的高
					rowHeightArr[index] = rowHeightArr[index] + heightArr[i] + itemMarginTop;
					//console.log(rowHeightArr)
				}
			}
			//console.log(heightArr)
			
			//设置wrapper的宽和高
			wrapper.style.cssText=`width: ${
        (col * itemWidth + itemMarginRight * (col - 1) + 'px')};
									height: ${
        (rowHeightArr.slice(0).sort(function (a, b) {
         return b - a })[0] + 80 + 'px')}`;
		}
		function getSize() {
      
			return {
      
				width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
				height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
			}
		}
		window.onload=function(){
      
			waterFall();
		}
		window.onresize=function(){
      
			waterFall();
		}
	script>
body>

html>

效果图：

你可能感兴趣的:(html,css,js)

  • 负载均衡策略之轮询策略 Time-Traveler Python算法与数据结构
    本文转自:https://mozillazg.com/2019/02/load-balancing-strategy-algorithm-weighted-round-robin.html#hidround-robin,尊重原创前言:本文简单介绍一下轮询(RoundRobin)这个负载均衡策略。轮询选择(RoundRobin):轮询选择指的是从已有的后端节点列表中按顺序依次选择一个节点出来提供服务
  • 4（四） Jmeter自动化报表html生成 夜晚打字声 工具jmeter自动化运维
    从JMeter3.0开始已支持自动生成动态报告，我们可以更容易根据生成的报告来完成我们的性能测试报告。如何生成html测试报告如果未生成结果文件（.jtl）,可运行如下命令生成报告:jmeter-n-ttest.jmx-lresult.jtl-e-o/tmp/ResultReport参数:-n：以非GUI形式运行Jmeter-t：source.jmx脚本路径-l：运行结果保存路径（.jtl）,此文
  • Vue相关面试题 努力的搬砖人. vue.js
    以下是150道Vue相关面试题及详细答案：Vue基础1.Vue.js是什么？Vue.js是一个用于构建用户界面的渐进式JavaScript框架，专注于视图层，允许开发者以声明式的方式构建用户界面，具有轻量、高效、易上手等特点。2.Vue实例的作用是什么？Vue实例是应用程序的核心，它管理数据、方法、生命周期钩子等，通过数据双向绑定将数据与视图层连接起来，实现数据驱动视图。3.如何创建一个Vue实例
  • 【概念】Node.js，Express.js MongoDB Mongoose Express-Validator Async Handler 一袋米扛几楼98 各类概念node.jsexpressjavascript
    1.Node.js定义：Node.js是一个基于ChromeV8引擎的JavaScript运行时环境，允许你在服务器端运行JavaScript代码。作用：它使得开发者可以使用JavaScript编写服务器端代码，从而实现前后端使用同一种语言。比喻：Node.js就像是“工厂的电力系统”，它为整个工厂（应用程序）提供动力（运行环境）。没有电力系统，工厂的机器（代码）就无法运转。特点：非阻塞I/O：N
  • 理解 Node.js 中的 process`对象与常用操作 red润 前端node.js前端javascript
    理解Node.js中的process对象与常用操作在Node.js中，process是一个全局对象，提供了与当前Node.js进程相关的信息和操作。无论是获取进程信息、处理信号、访问环境变量，还是控制进程行为，process都是不可或缺的工具。看到process不犯怵了1.获取进程信息process提供了许多属性和方法来获取当前进程的信息。process.pid：获取当前进程的PID（进程ID）。
  • npm详解：掌握 Node.js 包管理的艺术 Lv_Jin_Gang npm
    在现代软件开发领域，包管理和依赖处理是任何项目不可或缺的一部分。对于基于Node.js的应用程序而言，NPM（NodePackageManager）不仅是安装和管理第三方库的标准工具，也是发布、共享和重用代码片段的核心平台。本文将深入探讨NPM的各个方面，从基础概念到高级用法，旨在为你提供一个全面而深入的理解。一、NPM简介与安装1.1NPM的诞生与重要性NPM伴随着Node.js的诞生而出现，它
  • 如何用Function Calling解锁OpenAI的「真实世界」交互能力？（附Node.js 实战） hongkid AI编程
    一、FunctionCalling：大模型的「手脚延伸器」1.1核心定义FunctionCalling是OpenAI在2023年6月13日推出的革命性功能（对应模型版本gpt-3.5-turbo-0613和gpt-4-0613），允许开发者通过自然语言指令触发预定义函数，实现大模型与现实世界系统的交互。如同给语言模型安装「手脚」，使其不仅能思考，还能执行具体操作。openai官方说明：https:
  • Node.js系列（2）--性能优化指南 一进制ᅟᅠ        ‌‍‎‏  Node.jsnode.js性能优化
    Node.js性能优化指南⚡引言Node.js应用的性能优化是确保应用高效运行的关键。本文将深入探讨Node.js性能优化的各个方面，包括内存管理、CPU优化、I/O优化等，帮助开发者构建高性能的Node.js应用。性能优化概述Node.js性能优化主要包括以下方面：内存优化：内存泄漏检测、垃圾回收优化CPU优化：代码执行效率、异步处理、工作线程I/O优化：文件操作、网络请求、数据库访问缓存优化：
  • Node.js 包与 npm 详解：使用 npm 的重要注意事项与最佳实践 还是鼠鼠 node.jsnode.jsjavascriptvscode前端
    目录Node.js包与npm：使用npm的其它注意点详解1.package.json与package-lock.json的作用什么是package.json？什么是package-lock.json？示例：package-lock.json片段2.语义化版本（SemVer）与依赖版本管理3.全局安装vs.本地安装本地安装（默认）全局安装4.npm缓存管理与优化清理npm缓存5.依赖冲突与node_
  • springboot使用kafka自定义JSON序列化器和反序列化器 zhou_zhao_xu Kafkaspring
    1.序列化器packagecom.springboot.kafkademo.serialization;importcom.alibaba.fastjson.JSON;importcom.alibaba.fastjson.JSONObject;importorg.apache.kafka.common.serialization.Serializer;importjava.util.Map;/**
  • jquery基础和导航栏 声声codeGrandMaster djangopython后端
    jquery基础和导航栏目录1jQuery基础2jQuery事件3jQuery影藏和显示4jQuery滑动5、区块属性6、导航栏1jQuery基础介绍jQuery是一个JavaScript库。jQuery极大地简化了JavaScript编程。jQuery很容易学习。基础语法：$(selector).action()美元符号定义jQuery选择符（selector）“查询"和"查找”HTML元素jQ
  • python函数闭包和递归_闭包和递归_个人文章 - SegmentFault 思否 weixin_39830313 python函数闭包和递归
    js变量的作用域:全局作用域(全局变量):在函数外面声明的变量**生命周期(变量从声明到销毁)：页面从打开到关闭.局部作用域(局部变量):在函数里面声明的变量**生命周：开始调用函数到函数执行完毕1.闭包使用介绍1.闭包介绍(closure)1.1闭包：是一个可以在函数外部访问函数内部变量的函数->闭包是函数1.2闭包作用：可以在函数外部访问函数内部变量->延长局部变量的生命周期1.3闭包语法：-
  • vite项目中vite.config.js使用.env.development文件中的配置数据 初遇你时动了情 vitereactvue3javascriptecmascriptvite
    如下图.env和vite.config.js配置同级目录loadEnv就可以获取.env配置信息import{defineConfig,loadEnv}from"vite";importreactfrom"@vitejs/plugin-react-swc";import{resolve}from"path";importvitePluginImpfrom"vite-plugin-imp";impo
  • WebGL开发：BabylonJS从入门到精通（下卷） 莲华君 前端权威教程合集WebGL系统化学习webgl
    全书卷目：WebGL开发：BabylonJS从入门到精通（上卷）WebGL开发：BabylonJS从入门到精通（下卷）目录第一部分：基础篇——构建3D世界的基石第一章：BabylonJS概述与环境搭建什么是BabylonJS：WebGL宇宙的创世引擎BabylonJS的历史与优势：开源利剑的进化史安装与配置开发环境：3D工匠的工坊搭建术使用BabylonJSPlayground与本地开发环境浏览器
  • LLM的工具调用能力（如Function Calling） maxmaxma 前端javascript开发语言
    LLM的工具调用能力（如FunctionCalling）是增强大模型实用性的核心技术，使其能够通过生成结构化指令与外部系统交互。以下是关键要点及技术解析：一、工具调用的定义与原理核心机制LLM通过生成符合工具接口的指令（如JSON参数），触发外部工具执行。例如，用户提问天气时，模型生成{"location":"北京","date":"2025-03-22"}，系统调用天气API获取数据。分工明确：
  • 华为OD机试 - 相对开音节 - 正则表达式（Python/JS/C/C++ 2024 E卷 100分） 哪 吒 华为od正则表达式python
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述相对开音节构成的结构为辅音+元音（aeiou）+辅音(r除外)+
  • 华为OD机试 - 数列描述 - 动态规划（Python/JS/C/C++ 2024 B卷 100分） 哪 吒 华为od动态规划python
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述有一个数列a[N](N=60)，从a[0]开始，每一项都是一个数
  • 华为OD机试 - 输出单向链表中倒数第k个结点 - 双指针（Python/JS/C/C++ 2024 B卷 100分） 哪 吒 华为od链表python
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述输入一个单向链表，输出该链表中倒数第k个结点，链表的倒数第1个结
  • 华为OD机试 - 图片整理（Python/JS/C/C++ 2024 B卷 100分） 哪 吒 华为odpythonjavascript
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述Lily上课时使用字母数字图片教小朋友们学习英语单词，每次都需要
  • 华为OD机试 - 宜居星球改造计划 - 图的多源BFS（Python/JS/C/C++ 2023 B卷 100分） 哪 吒 华为od宽度优先python
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述2XXX年，人类通过对火星的大气进行宜居改造分析，使得火星已在理
  • 华为OD机试 - 红黑图（Python/JS/C/C++ 2023 B卷100分） 哪 吒 华为odpythonjavascript
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述众所周知红黑树是一种平衡树，它最突出的特性就是不能有两个相邻的红
  • 华为OD机试 - DNA序列（Python/JS/C/C++ 2023 B卷 100分） 哪 吒 华为odpythonjavascript
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述一个DNA序列由A/C/G/T四个字母的排列组合组成。G和C的比
  • 华为OD机试 - 书籍叠放 - 逻辑分析（Python/JS/C/C++ 2024 B卷 200分） 哪 吒 华为odpythonjavascript
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述书籍的长、宽都是整数对应(l,w)。如果书A的长宽度都比B长宽大
  • 华为OD机试 - 购买水果最便宜的方案 - 数组（Python/JS/C/C++ 2024 C卷 100分） 哪 吒 华为odpythonjavascript
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述有m个水果超市在1-n个小时的不同时间段提供不同价格的打折水果，
  • 华为OD机试 - 目录删除 - 深度优先搜索dfs算法（Python/JS/C/C++ 2024 B卷 200分） 哪 吒 算法华为od深度优先
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述某文件系统中有N个目录，每个目录都有一个独一无二的ID。每个目录
  • 华为OD机试 - 寻找最富裕的小家庭（Python/JS/C/C++ 2024 D卷 100分） 哪 吒 华为odpythonjavascript
    华为OD机试2024E卷题库疯狂收录中，刷题点这里专栏导读本专栏收录于《华为OD机试真题（Python/JS/C/C++）》。刷的越多，抽中的概率越大，私信哪吒，备注华为OD，加入华为OD刷题交流群，每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景，发现新题目，随时更新。一、题目描述在一棵树中，每个节点代表一个家庭成员，节点的数字表示其个人的财富
  • HTTP请求过程详解 酥暮沐 http网络协议网络
    一、整体流程概述HTTP请求过程从用户输入URL开始，到页面完成渲染结束，主要分为DNS解析、建立连接、发送请求、处理响应、渲染页面、断开连接六个核心阶段。重要：当用户输入URL后，浏览器首先解析域名，通过DNS查询获取服务器IP。接着通过三次握手建立TCP连接，如果是HTTPS还会进行TLS加密协商。然后浏览器发送HTTP请求，服务器处理后返回响应数据。浏览器解析HTML/CSS，构建DOM和渲
  • python将网银web工程转换成客户端electron工程案例 银行金融科技 人工智能机器学习DeepSeekelectron
    以下是一个将网银Web工程转换为Electron客户端的技术方案，结合Python和Electron实现桌面端增强功能：bash#项目结构webank-electron/├──main/#Electron主进程代码│├──main.js│└──python_server.py├──renderer/#网页渲染进程│└──webank-web/#原始网银Web工程├──package.json└──
  • 【元婴境】mysql的MVCC（详解） jstart千语 mysql数据库
    目录MVCC介绍隐藏字段undologReadView示例：流程总结MVCC介绍大家好，我是jstart千语。上篇我们讲到mysql的事务隔离级别，其中MVCC就是控制事务隔离级别的重要组成部分，也是实现事务四大特性之一隔离性的重要手段。那么接下来我将通透地讲解MVCC，让大家对mysql的隔离性有一个更深刻的理解。MVCC全称Multi-VersionConcurrencyControl，也就是
  • 前端如何实现鼠标移上这个元素，另外一个元素变色 =^_^=银爪 css前端javascript
    1、使用CSS选择器和伪类来实现这个效果具体步骤如下：获取要修改样式的元素使用CSS选择器选中要操作的元素，并使用伪类“:hover”来指定当鼠标悬停在该元素上时应用的样式指定要应用的样式例如，如果您有一个元素ID为“target”，需要将其颜色更改为红色，当鼠标移到ID为“trigger”的元素上时，可以使用以下代码：#trigger:hover#target{color:red;}这段代码指定
  • java观察者模式 3213213333332132 java设计模式游戏观察者模式
    观察者模式——顾名思义，就是一个对象观察另一个对象，当被观察的对象发生变化时，观察者也会跟着变化。 在日常中，我们配java环境变量时，设置一个JAVAHOME变量,这就是被观察者，使用了JAVAHOME变量的对象都是观察者，一旦JAVAHOME的路径改动，其他的也会跟着改动。 这样的例子很多，我想用小时候玩的老鹰捉小鸡游戏来简单的描绘观察者模式。 老鹰会变成观察者，母鸡和小鸡是
  • TFS RESTful API 模拟上传测试 ronin47
           TFS RESTful API 模拟上传测试。 　　 细节参看这里：https://github.com/alibaba/nginx-tfs/blob/master/TFS_RESTful_API.markdown 模拟POST上传一个图片： curl --data-binary @/opt/tfs.png http
  • PHP常用设计模式单例, 工厂, 观察者, 责任链, 装饰, 策略,适配,桥接模式 dcj3sjt126com 设计模式PHP
    // 多态, 在JAVA中是这样用的, 其实在PHP当中可以自然消除, 因为参数是动态的, 你传什么过来都可以, 不限制类型, 直接调用类的方法 abstract class Tiger { public abstract function climb(); } class XTiger extends Tiger { public function climb()
  • hibernate 171815164 Hibernate
    main,save Configuration conf =new Configuration().configure(); SessionFactory sf=conf.buildSessionFactory(); Session sess=sf.openSession(); Transaction tx=sess.beginTransaction(); News a=new
  • Ant实例分析 g21121 ant
            下面是一个Ant构建文件的实例，通过这个实例我们可以很清楚的理顺构建一个项目的顺序及依赖关系，从而编写出更加合理的构建文件。           下面是build.xml的代码： <?xml version="1
  • [简单]工作记录_接口返回405原因 53873039oycg 工作
             最近调接口时候一直报错，错误信息是:       responseCode:405 responseMsg:Method Not Allowed        接口请求方式Post.
  • 关于java.lang.ClassNotFoundException 和 java.lang.NoClassDefFoundError 的区别 程序员是怎么炼成的
       真正完成类的加载工作是通过调用 defineClass来实现的；  而启动类的加载过程是通过调用 loadClass来实现的；  就是类加载器分为加载和定义   protected Class<?> findClass(String name) throws ClassNotFoundExcept
  • JDBC学习笔记-JDBC详细的操作流程 aijuans jdbc
    所有的JDBC应用程序都具有下面的基本流程：　　1、加载数据库驱动并建立到数据库的连接。　　2、执行SQL语句。　　3、处理结果。　　4、从数据库断开连接释放资源。 下面我们就来仔细看一看每一个步骤： 其实按照上面所说每个阶段都可得单独拿出来写成一个独立的类方法文件。共别的应用来调用。 1、加载数据库驱动并建立到数据库的连接：   Html代码  St
  • rome创建rss antonyup_2006 tomcatcmsxmlstrutsOpera
    引用 1.RSS标准 RSS标准比较混乱，主要有以下3个系列 RSS 0.9x / 2.0 : RSS技术诞生于1999年的网景公司(Netscape)，其发布了一个0.9版本的规范。2001年，RSS技术标准的发展工作被Userland Software公司的戴夫 温那(Dave Winer)所接手。陆续发布了0.9x的系列版本。当W3C小组发布RSS 1.0后，Dave W
  • html表格和表单基础 百合不是茶 html表格表单meta锚点
    第一次用html来写东西,感觉压力山大,每次看见别人发的都是比较牛逼的 再看看自己什么都还不会,   html是一种标记语言,其实很简单都是固定的格式   _----------------------------------------表格和表单 表格是html的重要组成部分,表格用在body里面的 主要用法如下; <table> &
  • ibatis如何传入完整的sql语句 bijian1013 javasqlibatis
            ibatis如何传入完整的sql语句？进一步说，String str ="select * from test_table"，我想把str传入ibatis中执行，是传递整条sql语句。         解决办法： <
  • 精通Oracle10编程SQL(14)开发动态SQL bijian1013 oracle数据库plsql
    /* *开发动态SQL */ --使用EXECUTE IMMEDIATE处理DDL操作 CREATE OR REPLACE PROCEDURE drop_table(table_name varchar2) is sql_statement varchar2(100); begin sql_statement:='DROP TABLE '||table_name;
  • 【Linux命令】Linux工作中常用命令 bit1129 linux命令
    不断的总结工作中常用的Linux命令   1.查看端口被哪个进程占用   通过这个命令可以得到占用8085端口的进程号，然后通过ps -ef|grep 进程号得到进程的详细信息   netstat -anp | grep 8085   察看进程ID对应的进程占用的端口号   netstat -anp | grep 进程ID &
  • 优秀网站和文档收集 白糖_ 网站
    集成 Flex, Spring, Hibernate 构建应用程序   性能测试工具-JMeter   Hmtl5-IOCN网站   Oracle精简版教程网站   鸟哥的linux私房菜   Jetty中文文档   50个jquery必备代码片段   swfobject.js检测flash版本号工具
  • angular.extend boyitech AngularJSangular.extendAngularJS API
    angular.extend 复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象，你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制. 使用方法: angular.extend(dst, src); 参数:
  • java-谷歌面试题-设计方便提取中数的数据结构 bylijinnan java
    网上找了一下这道题的解答，但都是提供思路，没有提供具体实现。其中使用大小堆这个思路看似简单，但实现起来要考虑很多。 以下分别用排序数组和大小堆来实现。 使用大小堆： import java.util.Arrays; public class MedianInHeap { /** * 题目：设计方便提取中数的数据结构 * 设计一个数据结构，其中包含两个函数，1.插
  • ajaxFileUpload 针对 ie jquery 1.7+不能使用问题修复版本 Chen.H ajaxFileUploadie6ie7ie8ie9
    jQuery.extend({ handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); }
  • [机器人制造原则]机器人的电池和存储器必须可以替换 comsci 制造
           机器人的身体随时随地可能被外来力量所破坏,但是如果机器人的存储器和电池可以更换,那么这个机器人的思维和记忆力就可以保存下来,即使身体受到伤害,在把存储器取下来安装到一个新的身体上之后,原有的性格和能力都可以继续维持.....        另外,如果一
  • Oracle Multitable INSERT 的用法 daizj oracle
    转载Oracle笔记-Multitable INSERT 的用法 http://blog.chinaunix.net/uid-8504518-id-3310531.html 一、Insert基础用法 语法：     Insert Into 表名 (字段1,字段2,字段3...）     Values (值1,
  • 专访黑客历史学家George Dyson datamachine on
    20世纪最具威力的两项发明——核弹和计算机出自同一时代、同一群年青人。可是，与大名鼎鼎的曼哈顿计划（第二次世界大战中美国原子弹研究计划）相 比，计算机的起源显得默默无闻。出身计算机世家的历史学家George Dyson在其新书《图灵大教堂》（Turing’s Cathedral）中讲述了阿兰·图灵、约翰·冯·诺依曼等一帮子天才小子创造计算机及预见计算机未来
  • 小学6年级英语单词背诵第一课 dcj3sjt126com englishword
    always 总是 rice 水稻，米饭 before 在...之前 live 生活，居住   usual 通常的 early 早的 begin 开始 month 月份   year 年 last 最后的 east 东方的 high 高的   far 远的 window 窗户 world 世界 than 比...更  
  • 在线IT教育和在线IT高端教育 dcj3sjt126com 教育
    codecademy  http://www.codecademy.com codeschool  https://www.codeschool.com teamtreehouse  http://teamtreehouse.com lynda http://www.lynda.com/ Coursera https://www.coursera.
  • Struts2 xml校验框架所定义的校验文件 蕃薯耀 Struts2 xml校验Struts2 xml校验框架Struts2校验
      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 15:54:59 星期六 http://fa
  • mac下安装rar和unrar命令 hanqunfeng mac
    1.下载：http://www.rarlab.com/download.htm 选择 RAR 5.21 for Mac OS X 2.解压下载后的文件 tar -zxvf rarosx-5.2.1.tar 3.cd rar sudo install -c -o $USER unrar /bin #输入当前用户登录密码 sudo install -c -o $USER rar
  • 三种将list转换为map的方法 jackyrong list
      在本文中，介绍三种将list转换为map的方法： 1） 传统方法 假设有某个类如下    class Movie { private Integer rank; private String description; public Movie(Integer rank, String des
  • 年轻程序员需要学习的5大经验 lampcy 工作PHP程序员
    在过去的7年半时间里，我带过的软件实习生超过一打，也看到过数以百计的学生和毕业生的档案。我发现很多事情他们都需要学习。或许你会说，我说的不就是某种特定的技术、算法、数学，或者其他特定形式的知识吗？没错，这的确是需要学习的，但却并不是最重要的事情。他们需要学习的最重要的东西是“自我规范”。这些规范就是：尽可能地写出最简洁的代码；如果代码后期会因为改动而变得凌乱不堪就得重构；尽量删除没用的代码，并添加
  • 评“女孩遭野蛮引产致终身不育 60万赔偿款1分未得”医腐深入骨髓 nannan408
    先来看南方网的一则报道： 再正常不过的结婚、生子，对于29岁的郑畅来说，却是一个永远也无法实现的梦想。从2010年到2015年，从24岁到29岁，一张张新旧不一的诊断书记录了她病情的同时，也清晰地记下了她人生的悲哀。 　　粗暴手术让人发寒 　　2010年7月，在酒店做服务员的郑畅发现自己怀孕了，可男朋友却联系不上。在没有和家人商量的情况下，她决定堕胎。 　　12月5日，
  • 使用jQuery为input输入框绑定回车键事件 VS 为a标签绑定click事件 Everyday都不同 jspinput回车键绑定clickenter
    假设如题所示的事件为同一个，必须先把该js函数抽离出来，该函数定义了监听的处理：   function search() { //监听函数略...... }   为input框绑定回车事件，当用户在文本框中输入搜索关键字时，按回车键，即可触发search():   //回车绑定 $(".search").keydown(fun
  • EXT学习记录 tntxia ext
      1. 准备   （1） 官网：http://www.sencha.com/   里面有源代码和API文档下载。   EXT的域名已经从www.extjs.com改成了www.sencha.com ，但extjs这个域名会自动转到sencha上。   （2）帮助文档：   想要查看EXT的官方文档的话，可以去这里h
  • mybatis3的mapper文件报Referenced file contains errors xingguangsixian mybatis
    最近使用mybatis.3.1.0时无意中碰到一个问题： The errors below were detected when validating the file "mybatis-3-mapper.dtd" via the file "account-mapper.xml". In most cases these errors can be d
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他