<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>瀑布流</title>

    <style type="text/css">

        *{margin: 0; padding: 0; }

        body{text-align: center;}

        .content{margin: 0 auto ; text-align: center; width: 960px; overflow: hidden; }

        .content ul{float: left; width: 220px; margin: 5px; padding: 5px;}

        .content ul li{ border: 1px solid #8b4513; list-style: none; overflow: hidden; margin-top: 5px;}

    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script type="text/javascript">

        var _load = 0;

        function getMmsPicList(){

            _load =1 ;

            var list = {"list":[

                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/1.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},

                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/2.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},

                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/3.jpg","txt":"瀑布流思密达瀑布流思密达"},

                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/4.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达"},

                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/5.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},

                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/6.jpg","txt":"瀑布流思密达"},

                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/7.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},

                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/8.jpg","txt":"8等哈克h发发s客户方卡斯"},

                {"pic":"http://www.cssha.com/wp-content/uploads/2012/05/9.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"}

            ]};

            for(i in list.list){

                var pic = list.list[i].pic ;

                var txt = list.list[i].txt ;

                var oUl = $('.content ul') ;

                oUl.sort(function(a,b){

                    return $(a).height()-$(b).height();

                })

                var HTMLstr2 =  '<li>'+

                        '<img src="'+pic+'" alt="">'+

                        '<p>'+txt+'</p>'+

                        '</li>' ;

                $(oUl[0]).append(HTMLstr2);

            }

            _load = 0;

        }

        $(document).ready(function(){

            $(window).scroll(function(){

                var top = $(window).scrollTop() ;

                var winH = $(window).height() ;

                var docH = $(document).height();

                if(docH==(top+winH)){

                    if(_load==0){

                        getMmsPicList();

                    }

                }

            });

        });

    </script>

</head>

<body>

<div class="content">

    <ul class="list1">

        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/1.jpg" alt=""><p>瀑布流思密达</p></li>

        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/2.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>

        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/3.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>

    </ul>

    <ul class="list2">

        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/4.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>

        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/5.jpg" alt=""><p>瀑布流思密达</p></li>

        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/6.jpg" alt=""><p>瀑布流思密达瀑布流思密达</p></li>

    </ul>

    <ul class="list3">

        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/7.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>

        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/8.jpg" alt=""><p>瀑布流思密达瀑布流思密达</p></li>

        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/9.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>

    </ul>

    <ul class="list4">

        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/1.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>

        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/5.jpg" alt=""><p>瀑布流思密达</p></li>

        <li><img src="http://www.cssha.com/wp-content/uploads/2012/05/7.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>

    </ul>

</div>

</body>

</html>

jQuery模拟瀑布流布局的更多相关文章

  1. jQuery Wookmark 瀑布流布局

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

  2. Jquery 实现瀑布流布局

    //保证img文件夹下有图片//引入jquery <script src="Script/jquery-1.7.2.js"></script> <st ...

  3. jQuery实现瀑布流布局详解（PC和移动端）

    首先我们将如下样式的若干个单元写进body中,并将“box”向左浮动: <div class="box">  <img class="img" ...

  4. jQuery实现瀑布流布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. JS 瀑布流布局

    瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

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

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

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

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

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

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

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

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

随机推荐

  1. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  2. CC2530定时器3的输入捕获中断

    CC2530定时器3的输入捕获中断 使用的是tim3的通道1的输入捕获P1_7口.//GPIO配置成复用功能,同时设置P1_7为输入.void irCaptureGpioInit(void){ P1S ...

  3. ORA-07217: sltln: environment variable cannot be evaluated及RMAN-06059

    备份脚本: RMAN> run { allocate channel c1 device type disk format '$BACKUP_HOME/level0/level0_%d_%s_% ...

  4. Qt5+VS2013兼容XP方法

    用Qt5+VS2013编译程序默认配置会在XP运行时报"不是有效的Win32程序"工作需要必须要XP运行 pro文件中加一句: 复制代码 QMAKE_LFLAGS_WINDOWS ...

  5. 【转】CTS tests 4.2_r4

    原文网址:http://www.xuebuyuan.com/1722006.html Precondition: 1.Get android sdk 2.Set adb to environment ...

  6. 北京Uber优步司机奖励政策（12月3日）

    用户组:人民优步(适用于12月3日) 滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://w ...

  7. 游标的使用实例(Sqlserver版本)

    游标,如果是之前给我说这个概念,我的脑子有二个想法:1.你牛:2.我不会 不会不是理由,更不是借口,于是便要学习,本人属性喜欢看代码,不喜欢看书的人,所以嘛,文字对我没有吸引力:闲话少说啊,给大家提供 ...

  8. 【转】PF_NETLINK应用实例NETLINK_KOBJECT_UEVENT具体实现－－udev实现原理

    相对于linux来说,udev还是一个新事物.然而,尽管它03年才出现,尽管它很低调(J),但它无疑已经成为linux下不可或缺的组件了.udev是什么?它是如何实现的?最近研究Linux设备管理时, ...

  9. Mysql日期函数，时间函数使用的总结

    一.MySQL 获得当前日期时间 函数 1.1 获得当前日期+时间(date + time)函数:now() mysql> select now();+--------------------- ...

  10. oracle 临时表空间的增删改查

    oracle 临时表空间的增删改查 oracle 临时表空间的增删改查 1.查看临时表空间 (dba_temp_files视图)(v_$tempfile视图)select tablespace_nam ...