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

    一.Bootstrap简介 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap是基于 HTML5.CSS3和Javascriopt开发的,它在 jQuery的基础上 ...

  2. Upgrading to Java 8——第四章 The Stream API

    在这章中我们将学习Stream API,在JDK 8 中的一项新的特性.为了理解这一章的主题,你需要知道如何使用Lambda表达式和java.util.function里的预定义的函数式接口. 一个S ...

  3. gvim编辑文件到github乱码

    with below _vimrc settings, code uploaded to GitHub will display with proper encoding set encoding=u ...

  4. 在一个排序的链表中，存在重复的结点，请删除该链表中重复的结点，重复的结点不保留，返回链表头指针。 例如，链表1->2->3->3->4->4->5 处理后为 1->2->5

    // test20.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...

  5. Beautiful People 分类： Brush Mode 2014-10-01 14:33 100人阅读 评论(0) 收藏

    Beautiful People Time Limit: 10000/5000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others)   ...

  6. 大话C#之属性

    前言 俗话说得好:工欲善其事,必先利其器.要想玩转OOP设计出一个优秀的类型,属性是必不可少的,那么我们今天就来说说c#中关于属性的二三事. 属性(property)分为无参属性(parameterl ...

  7. javascript实现数据结构：线性表--简单示例及线性表的顺序表示和实现

    线性表(linear list)是最常用且最简单的一种数据结构.一个线性表是n个数据元素的有限序列.在稍复杂的线性表中,一个数据元素可以由若干个数据项(item)组成. 其中: 数据元素的个数n定义为 ...

  8. firefox浏览器live http headers无法使用

    手贱的将firefox升级后,很多的插件不能使用.我这里因为用到live http headers,所以以此为例子.主要表现为live http headers修改数据包后,尤其是post数据包后,r ...

  9. delphi快捷键

    分类 快捷键 解释 备注 组 件 设 计 类 Escape 选择当前组件容器     Shift + Click 选择多个组件:选择窗体     Tab 选择下一个组件     Shift + Tab ...

  10. UITextField输入中文限制

      [self.textField addTarget:self action:@selector(textFieldDidChange:) forControlEvents:UIControlEve ...