瀑布流布局代码一例


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 相关文章推荐
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
node中的密码安全(加密)
Sep 17 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 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获取某个目录大小的代码
2008/09/10 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python IDLE清空窗口的实例
2018/06/25 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
查环查孕证明
2014/01/10 职场文书
中国文明网签名寄语
2014/01/18 职场文书
聚美优品励志广告词
2014/03/14 职场文书
春节联欢会主持词
2014/03/24 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers