瀑布流布局最近真的很流行，很多人都跟我一样想知道是怎么做出来的吧，经过网上搜索大量的参考结合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. Android -- NDK开发入门

    第一步,建立一个普通的Android项目HelloNDK,然后在与src同一级的目录下新建一个jni目录: 第二步,在jni目录下新建一个hello_ndk.c文件,代码如下: #include &l ...

  2. 【BZOJ】【1492】【NOI207】货币兑换Cash

    DP/CDQ分治 orz Hzwer copy了下他的代码……结果在while(j<top......)这一句中把一个括号的位置打错了……找了我一个多小时才找到TAT 很神奇……顺便贴下CDQ的 ...

  3. NYOJ-655 光棍的YY AC 分类： NYOJ 2013-12-29 19:24 224人阅读 评论(0) 收藏

    #include<stdio.h> #include<string.h> char str[210]; int max[210][52]={0}; int sum(int n, ...

  4. 异步解压ZIP文件

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  5. jquery ajax/post/get 传参数给 mvc的action

    jquery ajax/post/get 传参数给 mvc的action1.ActionResult Test1    2.View  Test1.aspx3.ajax page4.MetaObjec ...

  6. Working with LOBs in Oracle and PHP

    原文链接:http://www.oracle.com/technetwork/articles/fuecks-lobs-095315.html Working with LOBs in Oracle ...

  7. javascript实现数据结构与算法系列：栈 -- 顺序存储表示和链式表示及示例

    栈(Stack)是限定仅在表尾进行插入或删除操作的线性表.表尾为栈顶(top),表头为栈底(bottom),不含元素的空表为空栈. 栈又称为后进先出(last in first out)的线性表. 堆 ...

  8. 山寨小小军团开发笔记 之 GamePool

    很多时候我们对于物体(比如弓箭)大量的生成与销毁,这个时候可以把弓箭放在内存池中进行管理,加快体验.自己Copy了一个简易版的. 一.代码 GameObjectPoolManager.cs using ...

  9. 提高Python运行效率的六个窍门

    曾灵敏 - MAY 18, 2015 Python是一门优秀的语言,它能让你在短时间内通过极少量代码就能完成许多操作.不仅如此,它还轻松支持多任务处理,比如多进程. 不喜欢Python的人经常会吐嘈P ...

  10. POJ 2135

    Farm Tour Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10840   Accepted: 4011 Descri ...