瀑布流布局最近真的很流行，很多人都跟我一样想知道是怎么做出来的吧，经过网上搜索大量的参考结合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="http://liuxiaofan.com/demo/js/jquery-1.6.4.min.js" type="text/javascript"></script>
</head>
<body>
<ul id="lxf-box">
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/OLqypfV.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/msbvKWyQQzZuZy.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/WbWXwqpcxqcued.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/rabGVkIGq.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/rSmEiZGlAvvuZ.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/YewRtz.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/STVDndiZsIduZyLv.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/mWFuVrzCzpPdzdje.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/MsZvAyOFukxdzdjefXwi.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/OEycuedk.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/YwabRquVKrxd.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/+nwbuJpc.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/qymffF.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/DvKZdxCjtfqMv.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/SOmyOQZtlUfdzdjefXwi.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/REsUNXUvAkrdzdj.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/DQJwrFnDpgtdz.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/eJupzWlGPxz.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/IWpjipjp.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/OXsDgKacJeTdzdjefXwi.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/QPIzxiMkmlHdzdjefX.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/mrTNaJTaQyluZyLvvnWS.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/mqXLNuWiPrbdz.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/MiEJRJdimxPdzdjefXw.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/CczowVxqM.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/rabGVkIGq.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="http://www.liuxiaofan.com/demo/waterfall/zwPqjasxHYvdz.jpg"></a>
    <h3>图片标题</h3>
  </li>
</ul>
<script>
/*
原理：1.把所有的li的高度值放到数组里面
     2.第一行的top都为0
  3.计算高度值最小的值是哪个li
  4.把接下来的li放到那个li的下面
作者：刘晓帆
博客地址：[url]http://liuxiaofan.com[/url]
编写时间：2012年6月9日
*/
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瀑布流布局的更多相关文章

  1. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  2. Jquery瀑布流布局，jQuery Wookmark Load 示例

    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸同意的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 注意事项:img元素的width和weight属性需要写,否则定位会不准确. 查看j ...

  3. jquery瀑布流布局插件,兼容ie6不支持下拉加载,用于制作分类卡

    调用方法 $('需要布局的块').sault() 如果要在图片加载后调用需要使用$(window).load(function(fx){});函数,即等待图片加载完成再调用 3个参数 1.left:左 ...

  4. 基于jquery响应式网站图片无限加载瀑布流布局

    分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览   源码下载 实 ...

  5. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  6. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  7. jQuery Wookmark Load 瀑布流布局实例演示

    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...

  8. jQuery Wookmark 瀑布流布局

    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...

  9. 使用jquery+css实现瀑布流布局

    虽然可以直接使用css实现瀑布流布局,但显示的方式有点问题,所以这儿就直接使用jquery+css来实现瀑布流布局,最终效果如下:      思路是通过将每个小块的position设置为relativ ...

随机推荐

  1. 【每日scrum】NO.1

    今天我们小组正式开始了冲刺,问题还是不少的,有必要记录下来来指导和改进后续的工作: 1.负责去找地图,却发现地图不能很好的适应我们的软件,略心塞>>> 2.本来计划把迪杰斯特拉算法看 ...

  2. 软件工程随堂小作业——（C++）

    一.设计思路 本来我的思路是根据上楼的人数和上楼的层数来计算出平均值,但是我发现这个思路不对.于是我选择了最笨的方法,复杂度为O(n2). (1)输入坐电梯的人数和要去的楼层: (2)找到输入楼层里最 ...

  3. HDU 5151 Sit sit sit 区间dp

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5151 题解: 有n个椅子,编号为1到n. 现在有n个同学,编号为1到n,从第一个同学开始选择要坐的位 ...

  4. 02.Apache FtpServer使用数据库管理用户

    1.创建数据库及表 使用\apache-ftpserver-1.0.6\res\ftp-db.sql建表,内容如下: CREATE TABLE FTP_USER ( userid VARCHAR(64 ...

  5. 【Java】Eclipse导出jar包与javadoc

    1.导出jar包 2.导出javadoc 3.jar包添加javadoc 4.出错解决 参考资料: http://www.cnblogs.com/cyh123/p/3345889.html http: ...

  6. html之colspan && rowspan讲解

    1.colspan && rowspan均在td标签中使用 2.每个单元格大小一致的前提 <table border="1" bordercolor=&quo ...

  7. iOS导航栏-关闭半透明

    self.navigationController.navigationBar.translucent = NO;

  8. swift-基础部分

    变量常量,注释,分号,整数,浮点数.数值行类型转换,类型别名,波尔值,元组,可选,断言              let binaryInteger = 0b10001  let twoThousan ...

  9. OneApm，NewRelic

    https://newrelic.com/ http://www.csdn.net/article/2013-03-25/2814631-new-relic-mobile-app-real-time- ...

  10. Codeigniter 利用加密Key（密钥）的对象注入漏洞

    http://drops.wooyun.org/papers/1449 原文链接:http://www.mehmetince.net/codeigniter-object-injection-vuln ...