瀑布流布局代码一例


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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
对xmlHttp对象的理解
Jan 17 Javascript
js图片处理示例代码
May 12 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
react build 后打包发布总结
Aug 24 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 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 zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
PHP实现简易计算器功能
2020/08/28 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
详解node.js 事件循环
2020/07/22 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
Python实现八皇后问题示例代码
2018/12/09 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
python 实现表情识别
2020/11/21 Python
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
电子信息专业学生自荐信
2013/11/09 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
公司担保书格式范文
2014/05/12 职场文书
经典演讲稿汇总
2014/05/19 职场文书
书法社团活动总结
2015/05/07 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS