Jquery实现瀑布流布局(备有详细注释)


Posted in Javascript onJuly 31, 2015

本文实例讲述了Jquery实现瀑布流布局的方法。分享给大家供大家参考。具体如下:

瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些,但是很多人多源生js不是很熟练)。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery瀑布流布局(每行代码都有详细注释)-作者:刘晓帆</title>
<style type="text/css">
body, ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold 12px "微软雅黑"; }
/*瀑布流布局样式*/
#lxf-box { position: relative; }
#lxf-box li { position: absolute; background: #fff; border: solid 1px #ccc; text-align: center; padding: 10px; left: 0px; top: 0; }
h3 { padding-top: 8px; }
img { width: 200px; height: auto; display: block; border: 0 }
/*css3动画*/
li { -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s }
</style>
<script src="/js/jquery-1.6.4.min.js" type="text/javascript"></script>
</head>
<body>
<ul id="lxf-box">
 <li><a href="/"><img src="/demo/waterfall/OLqypfV.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/msbvKWyQQzZuZy.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/WbWXwqpcxqcued.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/rabGVkIGq.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/rSmEiZGlAvvuZ.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/YewRtz.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/STVDndiZsIduZyLv.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/mWFuVrzCzpPdzdje.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/MsZvAyOFukxdzdjefXwi.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/OEycuedk.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/YwabRquVKrxd.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/+nwbuJpc.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/qymffF.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/DvKZdxCjtfqMv.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/SOmyOQZtlUfdzdjefXwi.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/REsUNXUvAkrdzdj.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/DQJwrFnDpgtdz.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/eJupzWlGPxz.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/IWpjipjp.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/OXsDgKacJeTdzdjefXwi.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/QPIzxiMkmlHdzdjefX.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/mrTNaJTaQyluZyLvvnWS.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/mqXLNuWiPrbdz.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/MiEJRJdimxPdzdjefXw.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/CczowVxqM.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/rabGVkIGq.jpg"></a>
 <h3>图片标题</h3>
 </li>
 <li><a href="/"><img src="/demo/waterfall/zwPqjasxHYvdz.jpg"></a>
 <h3>图片标题</h3>
 </li>
</ul>
<script>
/*
原理:
1.把所有的li的高度值放到数组里面
2.第一行的top都为0
3.计算高度值最小的值是哪个li
4.把接下来的li放到那个li的下面
*/
var margin = 10;//这里设置间距
var li=$("li");//这里是区块名称
var  li_W = li[0].offsetWidth+margin;
//取区块的实际宽度(包含间距,这里使用源生的offsetWidth函数,不适用jQuery的width()函数是因为它不能取得实际宽度,例如元素内有pandding就不行了)
function liuxiaofan(){//定义成函数便于调用
  var h=[];//记录区块高度的数组
  var n = document.documentElement.offsetWidth/li_W|0;
  //窗口的宽度除以区块宽度就是一行能放几个区块
  for(var i = 0;i < li.length;i++) {//有多少个li就循环多少次
    li_H = li[i].offsetHeight;//获取每个li的高度
    if(i < n) {//n是一行最多的li,所以小于n就是第一行了
      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的宽度
    }
    $("h3").eq(i).text("编号:"+i+",高度:"+li_H);//把区块的序号和它的高度值写入对应的区块H3标题里面
  }
}
/* 使用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();};
</script>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
js获取变量
Aug 24 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 #Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 #Javascript
JavaScript实现图片轮播的方法
Jul 31 #Javascript
基于bootstrap3和jquery的分页插件
Jul 31 #Javascript
jquery-tips悬浮提示插件分享
Jul 31 #Javascript
javascript实现检验的各种规则
Jul 31 #Javascript
纯JS实现本地图片预览的方法
Jul 31 #Javascript
You might like
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
php简单日历函数
2015/10/28 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
javascript基本类型详解
2014/11/28 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
vue观察模式浅析
2018/09/25 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
学生会主席就职演讲稿
2014/01/14 职场文书
《画风》教学反思
2014/04/16 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
西湖英语导游词
2015/02/06 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
python编写五子棋游戏
2021/05/25 Python
Flask response响应的具体使用
2021/07/15 Python
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers