瀑布流布局代码一例


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 实例一(first)
Mar 16 Javascript
js遍历td tr等html元素
Dec 13 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
js动态获取时间的方法分析
Aug 02 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&amp;MYSQL服务器配置说明
2006/10/09 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
Python操作json的方法实例分析
2018/12/06 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
delegate与普通函数的区别
2014/01/22 面试题
JAVA中运算符的分类及举例
2015/09/12 面试题
机关办公室岗位职责
2014/04/16 职场文书
解除合同协议书
2014/04/17 职场文书
人民调解员培训方案
2014/06/05 职场文书
党员一帮一活动总结
2014/07/08 职场文书
质量负责人岗位职责
2015/02/15 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
导游词之天津古文化街
2019/11/09 职场文书