瀑布流布局最近真的很流行，很多人都跟我一样想知道是怎么做出来的吧，经过网上搜索大量的参考结合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. 主元分析PCA理论分析及应用

    首先,必须说明的是,这篇文章是完完全全复制百度文库当中的一篇文章.本人之前对PCA比较好奇,在看到这篇文章之后发现其对PCA的描述非常详细,因此迫不及待要跟大家分享一下,希望同样对PCA比较困惑的朋友 ...

  2. xml基础学习笔记04

    今天继续xml学习,主要是:SimpleXML快速解析文档.xml与数组相互转换 .博客中只是简单的做一个学习记录.积累.更加详细的使用方法,可以查看php手册 1.SimpleXML快速解析文档 前 ...

  3. C#_音乐播放器_用ListBox显示歌词

    在用ListBox显示歌词的时候,可以显示多行,同时可以控制每一行显示的样式等等.控制显示样式是在它的DrawItem事件中来控制的.首先要先将ListBox的DrawMode属性设置为OwnerDr ...

  4. window.showModalDialog的传值和返回值

    window.showModalDialog(URL,dialogArgments,features) 打开一个新窗口 URL为要将打开的网页地址. dialogArgments为设定好传递给新视窗网 ...

  5. 全球SEO行业调查报告

    这是一份来自MOZ的调查报告,本报告是两年一次的SEO行业调查,主要围绕SEO从业人员的特征.工作内容时间分配比例.对未来市场的看法.使用的seo工具以及SEO知识扩充渠道等展开. 这份报告可以对从事 ...

  6. HTTP persistent connection

    http://en.wikipedia.org/wiki/HTTP_persistent_connection

  7. nodeJs入门篇之认识nodejs

    摘要:将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏览器就基于V8,同时打开 ...

  8. 比较IE6的不同之处,与IE8 IE11 比较

    文档申明为  <!DOCTYPE html> IE6或者IE特有的一些东西 1.盒子模型 IE6:(使用 !DOCTYPE 声明指定 standards-compliant 模式) mar ...

  9. jquery json遍历和动态绑定事件

    <div id='tmpselectorList' style='border: 1px solid grey;max-height: 150px;position:absolute;text- ...

  10. codeforces 430A Points and Segments (easy)（理解能力有待提高……）

    题目 //终于看懂题目了,,,, //一条线段里面不是每个坐标上都有要染色的点,所以为了满足条件,只能考虑那些给出坐标的点 //所以就要排序一下了,不能直接根据坐标0 1 0 1…… #include ...