瀑布流布局代码一例


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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
javascript测试题练习代码
Oct 10 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 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如何得到当前页和上一页的地址?
2006/11/27 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
php 基础函数
2017/02/10 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
构建Python包的五个简单准则简介
2015/06/15 Python
python2 与python3的print区别小结
2018/01/16 Python
Python中optparser库用法实例详解
2018/01/26 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
python 消费 kafka 数据教程
2019/12/21 Python
Python实现自动访问网页的例子
2020/02/21 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
python3代码中实现加法重载的实例
2020/12/03 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
厨房工作人员岗位职责
2013/11/15 职场文书
企业口号大全
2014/06/12 职场文书
先进班集体事迹材料
2014/12/25 职场文书
社区元宵节活动总结
2015/02/06 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
研讨会致辞
2015/07/31 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
Python first-order-model实现让照片动起来
2022/06/25 Python