瀑布流布局代码一例


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 相关文章推荐
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
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设置一边执行一边输出结果的代码
2013/09/30 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
Javascript 布尔型分析
2008/12/22 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
jquery replace方法去空格
2017/05/08 jQuery
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
Python中的True,False条件判断实例分析
2015/01/12 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
python3多线程知识点总结
2019/09/26 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
为什么python比较流行
2020/06/19 Python
python如何求圆的面积
2020/07/01 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
Shell如何接收变量输入
2016/08/06 面试题
电焊工工作岗位职责
2014/02/06 职场文书
森林防火工作方案
2014/02/14 职场文书
房屋租赁协议书
2014/04/10 职场文书
和睦家庭事迹
2014/05/14 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
MySQL数据库 安全管理
2022/05/06 MySQL