<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function(){ var waterfull = { num:0, init: function() { window.onscroll=this.throttle(this.isScroll,150); this.isScroll();//初始化 }, isScroll:function(){ console.log("isScroll"); var _height=parseInt($(window).height()); var _srcoll=parseInt($(window).scrollTop()); //var _sTop=_height+_srcoll; var _sTop=_height+_srcoll-100;//减一行的高度 var $list=$("li"); var e; var li_top = $list.last().offset().top; if(li_top<_sTop){//判断li的top小于(屏幕+滚动高)的高度，即加载 console.log("li_top"+li_top+"-------_sTop"+_sTop); for(var j=0;j<10;j++){//胡乱添加点东西 $("#ul_shoplist").append("<li>"+waterfull.num+"</li>"); waterfull.num++; } } }, throttle: function(fn,delay){ var timer = null; var _this=this; return function(){ var context = _this, args = arguments; clearTimeout(timer); timer = setTimeout(function(){ fn.apply(context,args)}, delay); }; } } waterfull.init( );//瀑布流 }); </script> <style type="text/css"> #main{margin:0 auto;width:1100px;} ul,li{list-style:none;margin:0;padding:0;} li{width:360px;height:100px;border:1px solid #000;} </style> </head> <body> <div id="main"> <ul id="ul_shoplist"> <li>1111111111</li> <li>222222222</li> </ul> </div> </body> </html>
这是网上的一个瀑布流插件，效果更好： 2015-6-24
http://www.jq22.com/jquery-info362
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <!-- jquery库 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://jq22.qiniudn.com/masonry-docs.min.js"></script> </head> <body> <script type="text/javascript"> $(function() { var $container = $('#masonry'); $container.imagesLoaded(function() { $container.masonry({ itemSelector: '.box', gutter: 20, isAnimated: true, }); }); }); </script> <style type="text/css"> .container-fluid {padding:20px;} .box {margin-bottom: 20px;float: left;width: 220px;} .box img {max-width: 100%;} </style> <div id="masonry" class="container-fluid"> <div class="box"><img src="http://image.zhangxinxu.com/image/blog/201503/2015-03-25_231542.png"></div> <div class="box"><img src="http://image.zhangxinxu.com/image/blog/201503/2015-03-25_234342.png"></div> <div class="box"><img src="http://image.zhangxinxu.com/image/blog/201503/doufunao-s.jpg"></div> <div class="box"><img src="http://image.zhangxinxu.com/image/blog/201501/follow-me.jpg"></div> <div class="box"><img src="http://image.zhangxinxu.com/image/blog/201504/earth-star.jpg"></div> <div class="box"><img src="http://image.zhangxinxu.com/image/blog/201501/juhua.jpg"></div> </div> </body> </html>
第三个瀑布流例子：（最新图片由上而下在左右两列依次排列。图片左右两列，判断图片是否已加载，未加载的隐藏）
滚屏事件，由 logTime 时间值控制，超过500毫秒才能触发一次。
两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）
http://www.cnblogs.com/qq21270/p/4880955.html 代码已改好，推荐! 2015.10.14
第四个：国外一个瀑布流插件 ，还没研究
http://masonry.desandro.com/ 2015-10-12
第五个：纯手工打造漂亮的瀑布流，五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！
http://www.cnblogs.com/sanshi/p/3237429.html 2015-10-12
第六个：http://www.cnblogs.com/leolai/archive/2013/04/23/3038159.html 瀑布流插件（可用） 2014-8-12
瀑布流 - 代码参考：
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201503091492.html Pinterest样式的瀑布流图片（可惜是先排左列再排右列的）
http://www.zhangxinxu.com/study/201203/waterfall-layout.html http://www.zhangxinxu.com/wordpress/?p=2308 瀑布流布局（基于多栏列表流体布局实现）
http://www.lijian.net/p/windswaterflow/ 一个瀑布流例子，参考
http://www.cnblogs.com/2050/archive/2012/05/03/2480702.html http://chaping.github.io/waterfall/ 一个瀑布流例子，参考
http://www.cnblogs.com/slowsoul/archive/2013/02/10/2909746.html 一个绝对定位的瀑布流例子
http://tieba.baidu.com/p/3182692830?fr_bdps_bottom_login=1 一些瀑布流上存在的问题及解决方法（绝对定位瀑布流，图片高度获取问题，参考） 2015-10-10
............