一、javascript和html代码实现瀑布流的布局

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>瀑布流第一步</title>
<style>
	*{margin:0px;padding:0px;}
	#main .pin{
		width:225px;
		height:auto;
		padding:15px 0px 0px 15px;
		float:left;
	}

	#main .pin .box{
		width:205px;
		height:auto;
		padding:10px;
		background:#FFF;
		border:1px solid #CCC;
		box-shadow:0px 0px 6px #CCC;
		border-radius:5px;
	}
	#main .pin .box img{
		width:205px;
	}
</style>
<!-- 页面拖拽插件 -->
<script type="text/javascript" src="./js/drag.js">

</script>
<script type="text/javascript"><!--
//1
window.onload = function () {
	//2.定义父级
	var oParent = document.getElementById('main');
	//9.调用函数并定义
	var aPin = getClassObj(oParent,'pin');
	//alert(aPin.length);
	var iPinW = aPin[0].offsetWidth;
	//alert(iPinW);
	//10.计算页面可以放下多少个图片
	var num = Math.floor(document.documentElement.clientWidth/iPinW);
	//alert(num);
	//11.设置父级居中的样式
	oParent.style.cssText = 'width:'+num*iPinW+'px;margin:0 auto;';
	
	//12准备一个数组
	var compareAarr = [];
	//17定义一个字符串
	//var str = '';
	//13
	for(var i=0;i<aPin.length;i++){
		//22设置第一行的数量
		if(i<num){
			
		
		//获取每个图品的offsetHeight值
		compareAarr[i] = aPin[i].offsetHeight;
		//17获取高度的索引
		//str += i+'=>'+aPin[i].offsetHeight+'\n';
		//23
		}else{
			//取数组中的最小高度  compareAarr
			var minH = Math.min.apply({},compareAarr);
			//获取最小的key值
			var minKey = getMinKey(compareAarr,minH);
			//定位超出宽度多的那个
			aPin[i].style.position = 'absolute';
			//取超出的那个图片的top值
			aPin[i].style.top = minH + 'px';
			//设置超出那个图片的left值
			aPin[i].style.left = aPin[minKey].offsetLeft + 'px';
			//超出最后一个在加一 重新计算最低minH
			compareAarr[minKey] += aPin[i].offsetHeight;
		}
	}
	
	
	//实现图片的拖拽
	for(var i=num;i<aPin.length;i++){
		//绝对定位
		aPin[i].style.position = 'absolute';
		drag(aPin[i]);
	}
}
	/**
		获取数组组最小的键值
		arr数组
		minH最小键值
	*/
	//18定义一个函数   获取数组(compareAarr)中对应的最小的那个高的值(minH)
	function getMinKey(arr,minH){
		for(key in arr){
			if(arr[key] == minH){
				return key;
			}
		}
	}
	
	/**
		通过class选择元素
		parent父级
		className类名
	*/
	//3.定义一个函数
	function getClassObj(parent,className){
		//4.定义匹配父级下面所有的元素
		var obj = parent.getElementsByTagName('*');
		//5.定义一个数组
		var result = [];
		//6.循环obj
		for(var i=0;i<obj.length;i++){
			if(obj[i].className == className){
				//7.pushu进result中
				result.push(obj[i]);
			}
		}
		//8
		return result;
	}
	
--></script>
</head>
<body>

	<div id="main">
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/0.jpg">
			</div>
		</div>

		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/1.jpg">
			</div>
		</div>

		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/2.jpg">
			</div>
		</div>

		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/3.jpg">
			</div>
		</div>

		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/4.jpg">
			</div>
		</div>

		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/5.jpg">
			</div>
		</div>
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/6.jpg">
			</div>
		</div>
		
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/7.jpg">
			</div>
		</div>
		
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/8.jpg">
			</div>
		</div>
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/4.jpg">
			</div>
		</div>
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/9.png">
			</div>
		</div>
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/7.jpg">
			</div>
		</div>
		
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/8.jpg">
			</div>
		</div>
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/9.png">
			</div>
		</div>
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/7.jpg">
			</div>
		</div>
		
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/8.jpg">
			</div>
		</div>
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/9.png">
			</div>
		</div>
		
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/0.jpg">
			</div>
		</div>

		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/1.jpg">
			</div>
		</div>

		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/2.jpg">
			</div>
		</div>

		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/5.jpg">
			</div>
		</div>
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/4.jpg">
			</div>
		</div>
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/0.jpg">
			</div>
		</div>

		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/1.jpg">
			</div>
		</div>

		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/5.jpg">
			</div>
		</div>

		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/3.jpg">
			</div>
		</div>
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/4.jpg">
			</div>
		</div>
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/5.jpg">
			</div>
		</div>

		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/1.jpg">
			</div>
		</div>

		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/2.jpg">
			</div>
		</div>

		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/3.jpg">
			</div>
		</div>
		<div class="pin"><!--每一个小块-->
			<div class="box">
				<img src="./img/5.jpg">
			</div>
		</div>
	</div>
	
</body>
</html>

　　实现效果图：

一、javascript和html代码实现瀑布流的布局_第1张图片

你可能感兴趣的:(JavaScript)

  • 【Html实现“心形日出”（附效果+源代码）】| JavaScript面试题：解释一下异步编程中的回调函数、Promise和Async/Await的概念。它们有什么区别？ 追光者♂ html5css3心形日出前端特效JS面试题PromiseAsync/Await
    风会带走你曾经存在过的证明。——虞姬作者主页：追光者♂个人简介：[1]计算机专业硕士研究生[2]2023年城市之星领跑者TOP1(哈尔滨)[3]2022年度博客之星人工智能领域TOP4[4]阿里云社区特邀专家博主[5]CSDN-人工智能领域优质创作者无限进步，一起追光！！！
  • HTML中引入JavaScript的三种方式 北冥郇翔 javascripthtml前端
    在HTML中引入JavaScript主要有以下三种方式，每种方式都有其适用场景和注意事项：1.内嵌方式（在标签内直接编写代码）直接在HTML文件的或中使用标签编写JavaScript代码。特点：代码与HTML混合，适用于简单逻辑或快速测试。alert()等函数会阻塞HTML页面渲染（如引用[1]所示）。示例：window.alert("页面加载被阻塞！");//阻塞后续内容渲染2.外部引入方式（推
  • ECharts 数据集（Dataset） 沐知全栈开发 开发语言
    ECharts数据集（Dataset）引言ECharts是一个使用JavaScript实现的开源可视化库，它能够将数据通过丰富的图表形式展示出来。在ECharts中，数据集（Dataset）是一个非常重要的概念，它负责存储图表所需的数据。本文将详细介绍ECharts数据集（Dataset）的相关知识，包括其定义、作用、类型以及使用方法。数据集的定义数据集（Dataset）是ECharts中用于存储
  • Python+Playwright(0) 黑米粥✎ python开发语言自动化
    简介Playwright是一个强大的自动化库，由微软开发，主要用于web端UI自动化测试，支持python、java、JavaScript、C#等多种编程语言。Playwright仅用一个API即可自动执行Chromium、Firefox、WebKit等主流浏览器自动化操作，不仅支持无头模式和有头模式，还提供了代码录制的功能，极大提高了脚本编写的效率，并支持移动端自动化测试。Playwright相
  • 谷歌离线应用之渐进式 Web 应用 Progressive Web APP（PWA） 伍哥的传说 前端源码分享前端webapp
    一、渐进式Web应用（PWA）的定义‌渐进式Web应用（ProgressiveWebApp，PWA）是一种结合传统Web技术与现代移动应用特性的技术方案，旨在通过HTML、CSS和JavaScript构建具备‌原生应用体验‌的Web应用。其核心特性包括：‌可安装性‌：用户可将PWA添加到设备主屏幕，像原生应用一样独立运行；‌渐进增强‌：根据设备和网络环境逐步提升功能，确保基础功能在所有浏览器中可用
  • JavaScript性能优化实战 周盛欢 javascript性能优化开发语言
    嘿，小伙伴们！今天咱们来聊聊JavaScript性能优化。你可能觉得这听起来很复杂，但别怕，我保证用最简单的方式给你讲清楚，就算你是0基础也没问题！一、为啥要优化JavaScript性能？想象一下，你在网上冲浪，点开一个网页，结果半天加载不出来，或者页面卡得像蜗牛爬，那心情是不是超级糟糕？这就是性能问题惹的祸。而JavaScript是网页里很重要的部分，它能让网页动起来、交互起来，但如果写得不好，
  • 【架构】vue-cli集成electron Fiz-EIM官方 架构架构vue.jselectron
    一、引言在文章开始之前，需要先介绍一下webpack和electron；Webpack：是一个用于现代JavaScript应用程序的静态模块打包工具。Electron：Electron是一个使用JavaScript、HTML和CSS构建桌面应用程序的框架。当遇到需要将原本是web端的应用打包成桌面端的需求时，就可以采用webpack+electron的方式来开发桌面端，这种方式有以下四点好处：原项
  • 箭头函数和普通函数的区别？ =^_^=喵喵 javascript开发语言
    箭头函数（ArrowFunctions）和普通函数（传统函数）在JavaScript中有显著的区别，主要体现在语法、this的绑定、构造函数行为、参数处理等方面。以下是详细对比：1.语法差异普通函数：functionadd(a,b){returna+b;}或函数表达式：constadd=function(a,b){returna+b;};箭头函数（更简洁）：constadd=(a,b)=>a+b;
  • 浅说深拷贝（Deep Copy）与浅拷贝（Shallow Copy） =^_^=喵喵 javascript前端开发语言
    在JavaScript中，深拷贝和浅拷贝是两种不同的数据复制方式，主要区别在于如何处理引用类型数据（如对象、数组）。1.浅拷贝（ShallowCopy）定义：只复制对象的第一层属性，如果属性是引用类型（如对象、数组），则复制的是引用，而不是实际数据。特点：原始对象和拷贝后的对象共享引用类型的属性。修改其中一个对象的引用类型属性会影响另一个对象。实现方式：Object.assign()（仅第一层深拷
  • 使用JavaScript构建交互式Web页面：从基础到高级功能（附带实现代码~） 一ge科研小菜菜 Java前端开发javascript
    个人主页：一ge科研小菜鸡-CSDN博客期待您的关注1.引言JavaScript作为现代网页设计的核心技术之一，已发展成为前端开发中必不可少的编程语言。随着互联网的不断进化，用户对网页体验的需求日益增长，开发者需要借助JavaScript来实现页面动态交互、用户界面更新和复杂的数据操作。JavaScript的生态系统也日趋完善，从基础的ES6+特性到各种强大的前端框架如React、Vue和Angu
  • JavaScript原型链深度剖析 aike13ky javascript开发语言
    目录前言一、原型链1.原型链的主要组成原型（Prototype）构造函数（Constructor）实例（Instance）2.原型链的工作原理前言在JavaScript的世界中，原型链（PrototypeChain）是一个核心概念，它决定了对象如何继承属性和方法。对于初学者来说，理解原型链可能是个挑战，但一旦掌握了它，就能更好地利用JavaScript的动态性和灵活性。本篇文章将详细探讨JavaS
  • HarmonyOs开发之——TypeScript介绍、入门，及 TypeScript、JavaScript、ArkTs的具体区别解读。 chenrui310 ubuntulinux运维
    HarmonyOs开发之——TypeScript介绍、入门，及TypeScript、JavaScript、ArkTs的具体区别解读。一、开发语言介绍：TypeScript是JavaScript的超集，ArkTS则是TypeScript的超集。ArkTs是HarmonyOs的主力开发语言，它在TypeScript（简称TS）的基础上，匹配ArkUI框架，扩展了声明式UI、状态管理等相应的能力，让开发
  • Array.reduce 咔咔咔索菲斯 javascript前端
    Array.reduce()是JavaScript中用于将数组元素累积计算为单个值的高阶函数，其核心作用是对数组中的每个元素执行一个累加器函数，最终返回累积结果。以下是详细用法和示例：一、基本语法array.reduce((accumulator,currentValue,currentIndex,array)=>{//累加逻辑returnnewAccumulator;},initialValue
  • Python JSON 模块的基本使用(41) Android 小码峰啊 Python入门pythonjson服务器
    PythonJSON模块的基本使用一、引言在当今数字化的时代，数据的交换和存储变得至关重要。不同的应用程序和系统之间需要一种通用的数据格式来进行数据的传输和共享。JSON（JavaScriptObjectNotation）作为一种轻量级的数据交换格式，因其易于阅读和编写，同时也易于机器解析和生成，成为了广泛使用的数据格式之一。Python作为一门功能强大且应用广泛的编程语言，提供了json模块来方
  • 深入理解CSRF攻击与防护机制 布兰妮甜 javascriptcsrf防护机制前端
    Hi，我是布兰妮甜！在当今高度互联的Web应用环境中，安全威胁无处不在。CSRF（跨站请求伪造）作为一种常见的Web安全漏洞，长期位居OWASPTop10安全威胁榜单。这种攻击方式利用了网站对用户浏览器的信任，可能导致用户在不知情的情况下执行非预期的操作，如资金转账、密码更改等。本文将深入剖析CSRF攻击原理，详细介绍多种有效的防护机制，并提供实用的JavaScript代码示例，帮助开发者构建更加
  • 【前端】JS模块化解析-ESModule 果壳~ javascript前端开发语言
    目录基本介绍基本使用导入导出方式3种结合使用default用法import函数ESModule的解析流程导入的变量无法，导入方无法修改导出的变量，只能由导出方进行修改如果确实想在导入这边对导出的值进行修改，可以自定义set回调函数CommonJS和ESModule相互引用实验一下基本介绍JavaScript没有模块化一直是它的痛点，所以才会产生我们前面学习的社区规范:CommonJS、AMD、CM
  • 研一自救指南 - 06.HTML5系统学习 东部欧安时 html5
    前情提要：研一自救指南-01.java面向对象（黑马）研1自救指南-02.Java+AI智能辅助编程（黑马）研一自救指南-03.面向面经预习（前端）研一自救指南-04.面试狂刷（前端日常实习）研一自救指南-05.JavaScript系统学习基于W3school的HTML5学习1.html元素html链接点击这里//图像换行横线2.html样式背景颜色、对齐方式设置字体、颜色、大小3.文本格式化Th
  • 【高频考点精讲】前端AI集成实战：从TensorFlow.js到模型部署 全栈老李技术面试 前端高频考点精讲前端javascripthtmlcss面试题reactvue
    前端AI集成实战：从TensorFlow.js到模型部署‍作者：全栈老李更新时间：2025年5月‍适合人群：前端初学者、进阶开发者版权：本文由全栈老李原创，转载请注明出处。今天咱们聊聊前端工程师如何玩转AI——没错，用JavaScript就能搞机器学习！我是全栈老李，一个喜欢把复杂技术讲简单的实战派。最近发现不少前端同学对AI既好奇又害怕，其实真没想象中那么难，跟着老李走，30分钟让你亲手部署第一
  • 前端实战：运用 HTML、CSS 和 JavaScript 技术，打造一个宇宙风格的个人空间站网页 迟雨. 前端htmlwebcssjavascript
    一、引言在当今数字化的时代，拥有一个属于自己的个人空间网页是一件非常有意义的事情。本文将详细介绍如何运用HTML、CSS和JavaScript技术，构建一个类似宇宙的个人空间站网页。二、项目概述这个个人空间站网页由首页、个人中心、作品展示和个人博客四个核心页面组成。整体设计以宇宙星空为主题，融入星球、星星和流星等元素，营造出神秘而奇幻的氛围。用户可以通过点击首页的星球图标，轻松导航至不同页面，开启
  • H5调试工具vconsole和Eruda对比 _揽 前端学习笔记php开发语言前端javascript
    VConsole与Eruda对比分析VConsole和Eruda是两款主流的移动端JavaScript调试工具，它们在功能定位、使用场景和技术实现上有诸多差异。以下从多个维度进行对比，帮助你选择更适合的工具：一、核心功能对比功能维度VConsoleEruda基础日志输出✅支持console全系列方法✅支持并增强（如分组折叠、语法高亮）网络请求监控✅显示基本请求信息（URL、状态码）✅更详细（请求/
  • 信创时代技术栈选择与前景分析：国产替代背景下的战略路径与实践指南 猿享天开 信创开发系统安全科技创业创新开发语言
    博主简介：CSDN博客专家、CSDN平台优质创作者，高级开发工程师，数学专业，10年以上C/C++,C#,Java等多种编程语言开发经验，拥有高级工程师证书；擅长C/C++、C#等开发语言，熟悉Java常用开发技术，能熟练应用常用数据库SQLserver,Oracle,mysql,postgresql等进行开发应用，熟悉DICOM医学影像及DICOM协议,业余时间自学JavaScript,Vue,
  • 前端神器 Handsontable：表格处理的终极解决方案
    前端神器Handsontable：表格处理的终极解决方案一、Handsontable简介二、入门使用1.引入Handsontable2.创建基本表格3.常用配置项三、进阶功能与实际效果1.数据编辑与验证四、总结在前端开发领域，表格数据展示与编辑是极为常见的需求。Handsontable作为一款功能强大的JavaScript表格插件，能轻松应对各种复杂的表格场景。本文将对Handsontable展开
  • WebAssembly (Wasm) 与 JavaScript 字符串交互 hongkid wasmjavascript交互
    随着WebAssembly（简称Wasm）技术的发展，越来越多的Web应用开始利用Wasm来提高性能。Wasm是一种在现代Web浏览器中运行的二进制格式，可以提供接近原生代码的速度。然而，Wasm和JavaScript之间进行数据交换时需要特别注意，尤其是对于字符串这种复杂类型的数据。基础知识在Wasm中，内存是通过线性内存（LinearMemory）来管理的，它是一个连续的字节数组。由于Wasm
  • 【最新鸿蒙应用开发】——ArkWeb2——arkts与h5交互 秋叶先生_ harmonyos鸿蒙华为开发语言安卓交互
    H5与端侧交互1.应用侧调用前端页面函数应用侧可以通过runJavaScript()方法调用前端页面的JavaScript相关函数。在下面的示例中，点击应用侧的“runJavaScript”按钮时，来触发前端页面的htmlTest()方法。前端页面代码。  functionhtmlTest(){    console.info('JavaScriptHelloWorld!'); }应用侧代码。//
  • Node.js 常用工具 沐知全栈开发 开发语言
    Node.js常用工具引言Node.js是一个基于ChromeV8引擎的JavaScript运行环境，它允许开发者使用JavaScript编写服务器端代码。在Node.js的开发过程中，使用一些常用的工具可以大大提高开发效率和项目质量。本文将详细介绍Node.js开发中常用的工具，包括版本管理、代码编辑、包管理、调试、测试、性能监控等。版本管理工具：npm和Yarnnpmnpm（NodePacka
  • 如果你近期考虑搭建一个电竞比分网，那么这篇文章你一定要看，希望能帮到你 东奔西走的小喇叭 大数据
    要搭建一个基础的电竞比分网，首先需要处理以下几个关键部分：数据获取：通过API接口获取实时的电竞赛事数据。数据展示：将数据在前端呈现，展示实时比分、赛事信息等。后端管理：管理赛事信息，更新比分数据等。下面是一个简化版的电竞比分网代码框架，基于PythonFlask作为后端，使用JavaScript和HTML来显示数据，且通过某个电竞数据API（例如RiotGamesAPI或其他第三方提供的电竞AP
  • python和html和css什么关系什么区_python前端HTML和CSS入门 斤木
    前端阶段课程介绍1~4:HTML及CSS5~6:JavaScript7~10:jQuery00-知识点预习1、HTML基本结构2、HTML的常用标签3、HTML布局入门4、CSS概述5、CSS书写方式6、CSS常用选择器7、CSS常用属性01-什么是HTML？HTML是用来描述网页的一种语言。HTML指的是超文本标记语言:HyperTextMarkupLanguageHTML不是一种编程语言，而是
  • SpreadJS 公式填充技术解析
    引言在前端电子表格开发领域，SpreadJS作为一款强大的JavaScript电子表格控件，为开发者提供了丰富且实用的功能，其中公式填充功能尤为重要。它能极大提高数据处理效率，减少手动输入工作量。本文不仅会详细介绍SpreadJS公式填充的功能特性、不同场景表现及相关问题解决办法，还会添加公式填充的代码示例，帮助开发者更好地掌握和运用这一功能，提升前端电子表格应用的性能和用户体验。SpreadJS
  • 【React Three.js，探索前端技术之—— 简单的人脸动捕与 3D 模型表情同步应用】 智界软体库 3d
    大家好，我是智界软体库，致力于分享好用实用且智能的软件以及在JAVA语言开发中遇到的问题，如果本篇文章对你有所帮助请帮我点个小赞小收藏吧，谢谢喲！简介：React是一个用于构建用户界面的JavaScript框架，以其组件化的设计和高效的更新机制而闻名。Three.js则是一个基于JavaScript的3D图形库，能够轻松创建和渲染复杂的3D场景。当React与Three.js相遇，ReactThr
  • 实现在线访问OSS中的PDF、图片等文件（OSS不支持在线访问，而是默认下载）
    问题分析当OSS返回的响应头中Content-Disposition设置为attachment时，浏览器会强制下载文件。要实现在线预览，需要确保：响应头Content-Disposition为inline正确设置Content-Type头（如text/html、text/css、application/javascript）处理HTML中相对路径资源的引用问题示例代码//OssProxyContr
  • 枚举的构造函数中抛出异常会怎样 bylijinnan javaenum单例
    首先从使用enum实现单例说起。 为什么要用enum来实现单例？ 这篇文章（ http://javarevisited.blogspot.sg/2012/07/why-enum-singleton-are-better-in-java.html）阐述了三个理由： 1.enum单例简单、容易，只需几行代码： public enum Singleton { INSTANCE;
  • CMake 教程 aigo C++
    转自：http://xiang.lf.blog.163.com/blog/static/127733322201481114456136/   CMake是一个跨平台的程序构建工具，比如起自己编写Makefile方便很多。 介绍：http://baike.baidu.com/view/1126160.htm 本文件不介绍CMake的基本语法，下面是篇不错的入门教程： http:
  • cvc-complex-type.2.3: Element 'beans' cannot have character Cb123456 springWebgis
      cvc-complex-type.2.3: Element 'beans' cannot have character     Line 33 in XML document from ServletContext resource [/WEB-INF/backend-servlet.xml] is i
  • jquery实例:随页面滚动条滚动而自动加载内容 120153216 jquery
    <script language="javascript"> $(function (){ var i = 4;$(window).bind("scroll", function (event){ //滚动条到网页头部的 高度，兼容ie,ff,chrome var top = document.documentElement.s
  • 将数据库中的数据转换成dbs文件 何必如此 sqldbs
    旗正规则引擎通过数据库配置器（DataBuilder）来管理数据库，无论是Oracle，还是其他主流的数据都支持，操作方式是一样的。旗正规则引擎的数据库配置器是用于编辑数据库结构信息以及管理数据库表数据，并且可以执行SQL 语句，主要功能如下。 1)数据库生成表结构信息：         主要生成数据库配置文件(.conf文
  • 在IBATIS中配置SQL语句的IN方式 357029540 ibatis
    在使用IBATIS进行SQL语句配置查询时，我们一定会遇到通过IN查询的地方，在使用IN查询时我们可以有两种方式进行配置参数：String和List。具体使用方式如下： 1.String:定义一个String的参数userIds，把这个参数传入IBATIS的sql配置文件，sql语句就可以这样写： <select id="getForms" param
  • Spring3 MVC 笔记（一） 7454103 springmvcbeanRESTJSF
             自从 MVC 这个概念提出来之后 struts1.X  struts2.X   jsf 。。。。。 这个view 层的技术一个接一个！ 都用过！不敢说哪个绝对的强悍！ 要看业务，和整体的设计！      最近公司要求开发个新系统！
  • Timer与Spring Quartz 定时执行程序 darkranger springbean工作quartz
    有时候需要定时触发某一项任务。其实在jdk1.3，java sdk就通过java.util.Timer提供相应的功能。一个简单的例子说明如何使用，很简单： 1、第一步，我们需要建立一项任务，我们的任务需要继承java.util.TimerTask package com.test; import java.text.SimpleDateFormat; import java.util.Date;
  • 大端小端转换，le32_to_cpu 和cpu_to_le32 aijuans C语言相关
    大端小端转换，le32_to_cpu 和cpu_to_le32  字节序 http://oss.org.cn/kernel-book/ldd3/ch11s04.html         小心不要假设字节序. PC 存储多字节值是低字节为先(小端为先, 因此是小端), 一些高级的平台以另一种方式(大端)
  • Nginx负载均衡配置实例详解 avords
    [导读] 负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。负载均衡先来简单了解一下什么是负载均衡，单从字面上的意思来理解就可以解 负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。 负载均衡 先来简单了解一下什么是负载均衡
  • 乱说的 houxinyou 框架敏捷开发软件测试
    从很久以前，大家就研究框架，开发方法，软件工程，好多！反正我是搞不明白！ 这两天看好多人研究敏捷模型，瀑布模型！也没太搞明白. 不过感觉和程序开发语言差不多， 瀑布就是顺序，敏捷就是循环. 瀑布就是需求、分析、设计、编码、测试一步一步走下来。而敏捷就是按摸块或者说迭代做个循环，第个循环中也一样是需求、分析、设计、编码、测试一步一步走下来。 也可以把软件开发理
  • 欣赏的价值——一个小故事 bijian1013 有效辅导欣赏欣赏的价值
    　　第一次参加家长会，幼儿园的老师说："您的儿子有多动症，在板凳上连三分钟都坐不了，你最好带他去医院看一看。"　　回家的路上，儿子问她老师都说了些什么，她鼻子一酸，差点流下泪来。因为全班30位小朋友，惟有他表现最差；惟有对他，老师表现出不屑，然而她还在告诉她的儿子："老师表扬你了，说宝宝原来在板凳上坐不了一分钟，现在能坐三分钟。其他妈妈都非常羡慕妈妈，因为全班只有宝宝
  • 包冲突问题的解决方法 bingyingao eclipsemavenexclusions包冲突
    包冲突是开发过程中很常见的问题： 其表现有： 1.明明在eclipse中能够索引到某个类，运行时却报出找不到类。 2.明明在eclipse中能够索引到某个类的方法，运行时却报出找不到方法。 3.类及方法都有，以正确编译成了.class文件，在本机跑的好好的，发到测试或者正式环境就 抛如下异常： java.lang.NoClassDefFoundError: Could not in
  • 【Spark七十五】Spark Streaming整合Flume-NG三之接入log4j bit1129 Stream
    先来一段废话： 实际工作中，业务系统的日志基本上是使用Log4j写入到日志文件中的，问题的关键之处在于业务日志的格式混乱，这给对日志文件中的日志进行统计分析带来了极大的困难，或者说，基本上无法进行分析，每个人写日志的习惯不同，导致日志行的格式五花八门，最后只能通过grep来查找特定的关键词缩小范围，但是在集群环境下，每个机器去grep一遍，分析一遍，这个效率如何可想之二，大好光阴都浪费在这上面了
  • sudoku solver in Haskell bookjovi sudokuhaskell
    这几天没太多的事做，想着用函数式语言来写点实用的程序，像fib和prime之类的就不想提了（就一行代码的事），写什么程序呢？在网上闲逛时发现sudoku游戏，sudoku十几年前就知道了，学生生涯时也想过用C/Java来实现个智能求解，但到最后往往没写成，主要是用C/Java写的话会很麻烦。   现在写程序，本人总是有一种思维惯性，总是想把程序写的更紧凑，更精致，代码行数最少，所以现
  • java apache ftpClient bro_feng java
    最近使用apache的ftpclient插件实现ftp下载，遇见几个问题，做如下总结。 1. 上传阻塞，一连串的上传，其中一个就阻塞了，或是用storeFile上传时返回false。查了点资料，说是FTP有主动模式和被动模式。将传出模式修改为被动模式ftp.enterLocalPassiveMode();然后就好了。 看了网上相关介绍，对主动模式和被动模式区别还是比较的模糊，不太了解被动模
  • 读《研磨设计模式》-代码笔记-工厂方法模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 工厂方法模式：使一个类的实例化延迟到子类 * 某次，我在工作不知不觉中就用到了工厂方法模式（称为模板方法模式更恰当。2012-10-29）： * 有很多不同的产品，它
  • 面试记录语 chenyu19891124 招聘
    或许真的在一个平台上成长成什么样，都必须靠自己去努力。有了好的平台让自己展示，就该好好努力。今天是自己单独一次去面试别人，感觉有点小紧张，说话有点打结。在面试完后写面试情况表，下笔真的好难，尤其是要对面试人的情况说明真的好难。 今天面试的是自己同事的同事，现在的这个同事要离职了，介绍了我现在这位同事以前的同事来面试。今天这位求职者面试的是配置管理，期初看了简历觉得应该很适合做配置管理，但是今天面
  • Fire Workflow 1.0正式版终于发布了 comsci 工作workflowGoogle
    Fire Workflow 是国内另外一款开源工作流，作者是著名的非也同志，哈哈.... 官方网站是 http://www.fireflow.org 经过大家努力,Fire Workflow 1.0正式版终于发布了 正式版主要变化: 1、增加IWorkItem.jumpToEx(...)方法，取消了当前环节和目标环节必须在同一条执行线的限制，使得自由流更加自由 2、增加IT
  • Python向脚本传参 daizj python脚本传参
    如果想对python脚本传参数，python中对应的argc, argv(c语言的命令行参数)是什么呢？ 需要模块：sys 参数个数：len(sys.argv) 脚本名：    sys.argv[0] 参数1：     sys.argv[1] 参数2：     sys.argv[
  • 管理用户分组的命令gpasswd dongwei_6688 passwd
    NAME： gpasswd - administer the /etc/group file SYNOPSIS： gpasswd group gpasswd -a user group gpasswd -d user group gpasswd -R group gpasswd -r group gpasswd [-A user,...] [-M user,...] g
  • 郝斌老师数据结构课程笔记 dcj3sjt126com 数据结构与算法
    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  • yii2 cgridview加上选择框进行操作 dcj3sjt126com GridView
    页面代码 <?=Html::beginForm(['controller/bulk'],'post');?> <?=Html::dropDownList('action','',[''=>'Mark selected as: ','c'=>'Confirmed','nc'=>'No Confirmed'],['class'=>'dropdown',])
  • linux mysql fypop linux
    enquiry mysql version in centos linux yum list installed | grep mysql yum -y remove mysql-libs.x86_64 enquiry mysql version in yum repositoryyum list | grep mysql oryum -y list mysql* install mysq
  • Scramble String hcx2013 String
    Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrings recursively. Below is one possible representation of s1 = "great":
  • 跟我学Shiro目录贴 jinnianshilongnian 跟我学shiro
    历经三个月左右时间，《跟我学Shiro》系列教程已经完结，暂时没有需要补充的内容，因此生成PDF版供大家下载。最近项目比较紧，没有时间解答一些疑问，暂时无法回复一些问题，很抱歉，不过可以加群（334194438/348194195）一起讨论问题。     ----广告-----------------------------------------------------
  • nginx日志切割并使用flume-ng收集日志 liyonghui160com
         nginx的日志文件没有rotate功能。如果你不处理，日志文件将变得越来越大，还好我们可以写一个nginx日志切割脚本来自动切割日志文件。第一步就是重命名日志文件，不用担心重命名后nginx找不到日志文件而丢失日志。在你未重新打开原名字的日志文件前，nginx还是会向你重命名的文件写日志，linux是靠文件描述符而不是文件名定位文件。第二步向nginx主
  • Oracle死锁解决方法 pda158 oracle
    　select p.spid,c.object_name,b.session_id,b.oracle_username,b.os_user_name from v$process p,v$session a, v$locked_object b,all_objects c where p.addr=a.paddr and a.process=b.process and c.object_id=b.
  • java之List排序 shiguanghui list排序
       在Java Collection Framework中定义的List实现有Vector，ArrayList和LinkedList。这些集合提供了对对象组的索引访问。他们提供了元素的添加与删除支持。然而，它们并没有内置的元素排序支持。 　　你能够使用java.util.Collections类中的sort()方法对List元素进行排序。你既可以给方法传递
  • servlet单例多线程 utopialxw 单例多线程servlet
    转自http://www.cnblogs.com/yjhrem/articles/3160864.html 和   http://blog.chinaunix.net/uid-7374279-id-3687149.html Servlet 单例多线程 Servlet如何处理多个请求访问？Servlet容器默认是采用单实例多线程的方式处理多个请求的：1.当web服务器启动的
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他