瀑布流布局代码一例


Posted in Javascript onApril 11, 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>瀑布流布局代码</title> 
<script type="text/javascript" src="js/jquery.js"></script> 
<style type="text/css"> 
body, div, img, h1, h2, h3, h4, h5, h6 { padding:0px; margin:0px; } 
img { border:none; } 
.wrapper { width:960px; margin:0 auto; } 
#con1_1 { position:relative; } 
#con1_1 .product_list { position:absolute; left:0px; top:0px; padding:10px; background:#eee; } 
.product_list img { width:200px; display:block; } 
.product_list h2 { padding:5px 0px; font-size:12px; text-align:center; color:#333; } 
</style> 
</head> 
<body> 
<div class="wrapper"> 
<h3>这是正文的标题部分</h3> 
<div id="con1_1"> 
<div class="product_list"> <a href="#"><img src="images/img1.jpg"></a> 
<h2>图片高度</h2> 
</div> 
<div class="product_list"> <a href="#"><img src="images/img2.jpg"></a> 
<h2>图片高度</h2> 
</div> 
<div class="product_list"> <a href="#"><img src="images/img3.jpg"></a> 
<h2>图片高度</h2> 
</div> 
<div class="product_list"> <a href="#"><img src="images/img4.jpg"></a> 
<h2>图片高度</h2> 
</div> 
<div class="product_list"> <a href="#"><img src="images/img5.jpg"></a> 
<h2>图片高度</h2> 
</div> 
<div class="product_list"> <a href="#"><img src="images/img6.jpg"></a> 
<h2>图片高度</h2> 
</div> 
<div class="product_list"> <a href="#"><img src="images/img7.jpg"></a> 
<h2>图片高度</h2> 
</div> 
<div class="product_list"> <a href="#"><img src="images/img8.jpg"></a> 
<h2>图片高度</h2> 
</div> 
</div> 
<h3>这行文字的位置首先要用js去计算下上面内容的高度了</h3> 
</div> 
</body> 
<script type="text/javascript"> 
/* 
原理:1.把所有的li的高度值放到数组里面 
2.第一行的top都为0 
3.计算高度值最小的值是哪个li 
4.把接下来的li放到那个li的下面 
*/ 
var margin = 10;//设置间距 
var li=$(".product_list");//区块名称 
var li_W = li[0].offsetWidth+margin;//取区块的实际宽度 
function liuxiaofan(){ 
var h=[];//记录区块高度的数组 
var n = 960/li_W|0; 
for(var i = 0;i < li.length;i++) { 
li_H = li[i].offsetHeight;//获取每个li的高度 
if(i < n) {//n是一行最多的li,所以小于n就是第一行了 
max_H =Math.max.apply(null,h); 
h[i]=li_H;//把每个li放到数组里面 
li.eq(i).css("top",0);//第一行的Li的top值为0 
li.eq(i).css("left",i * li_W);//第i个li的左坐标就是i*li的宽度 
} 
else{ 
min_H =Math.min.apply(null,h) ;//取得数组中的最小值,区块中高度值最小的那个 
minKey = getarraykey(h, min_H);//最小的值对应的指针 
h[minKey] += li_H+margin ;//加上新高度后更新高度值 
li.eq(i).css("top",min_H+margin);//先得到高度最小的Li,然后把接下来的li放到它的下面 
li.eq(i).css("left",minKey * li_W); //第i个li的左坐标就是i*li的宽度 
} 
$("h2").eq(i).text("高度:"+li_H);//把区块高度值写入对应的区块H2标题里面 
} 
max =Math.max.apply(null,h) ; 
$("#con1_1").css("height",max); 
} 
/* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */ 
function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}} 
/*这里一定要用onload,因为图片不加载完就不知道高度值*/ 
window.onload = function() {liuxiaofan();}; 
window.onresize = function() {liuxiaofan();}; 
$(function(){ 
$(".product_list").hover(function(){ 
$(this).css("background-color","#ddd"); 
},function() { 
$(this).css("background-color","#eee"); 
}); 
}); 
</script> 
</html>
Javascript 相关文章推荐
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
JS实现图片切换特效
Dec 23 Javascript
javascript读写json示例
Apr 11 #Javascript
javascript如何判断输入的url是否正确
Apr 11 #Javascript
javascript判断office版本示例
Apr 11 #Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 #Javascript
jquery解析xml字符串简单示例
Apr 11 #Javascript
代码获取历史上的今天发生的事
Apr 11 #Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 #Javascript
You might like
利用PHP和AJAX创建RSS聚合器的代码
2007/03/13 PHP
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
浅析return false的正确使用
2013/11/04 Javascript
node.js中的require使用详解
2014/12/15 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
python封装对象实现时间效果
2020/04/23 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
Python 创建守护进程的示例
2020/09/29 Python
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
后备干部考察材料
2014/02/12 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
大国崛起日本观后感
2015/06/02 职场文书
电影雷锋观后感
2015/06/10 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
python字符串的多行输出的实例详解
2021/06/08 Python
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python