<!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":"uploads/pics/2016/01/site=cssha","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"}, {"pic":"uploads/pics/2016/01/site=cssha","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"}, {"pic":"uploads/pics/2016/01/site=cssha","txt":"瀑布流思密达瀑布流思密达"}, {"pic":"uploads/pics/2016/01/site=cssha","txt":"瀑布流思密达瀑布流思密达瀑布流思密达"}, {"pic":"uploads/pics/2016/01/site=cssha","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"}, {"pic":"uploads/pics/2016/01/site=cssha","txt":"瀑布流思密达"}, {"pic":"uploads/pics/2016/01/site=cssha","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"}, {"pic":"uploads/pics/2016/01/site=cssha","txt":"8等哈克h发发s客户方卡斯"}, {"pic":"uploads/pics/2016/01/site=cssha","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://img.daimajiayuan.com/uploads/pics/2016/01/site=cssha" alt="jQuery模拟瀑布流布局" alt=""><p>瀑布流思密达</p></li> <li><img src="http://img.daimajiayuan.com/uploads/pics/2016/01/site=cssha" alt="jQuery模拟瀑布流布局" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li> <li><img src="http://img.daimajiayuan.com/uploads/pics/2016/01/site=cssha" alt="jQuery模拟瀑布流布局" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li> </ul> <ul class="list2"> <li><img src="http://img.daimajiayuan.com/uploads/pics/2016/01/site=cssha" alt="jQuery模拟瀑布流布局" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li> <li><img src="http://img.daimajiayuan.com/uploads/pics/2016/01/site=cssha" alt="jQuery模拟瀑布流布局" alt=""><p>瀑布流思密达</p></li> <li><img src="http://img.daimajiayuan.com/uploads/pics/2016/01/site=cssha" alt="jQuery模拟瀑布流布局" alt=""><p>瀑布流思密达瀑布流思密达</p></li> </ul> <ul class="list3"> <li><img src="http://img.daimajiayuan.com/uploads/pics/2016/01/site=cssha" alt="jQuery模拟瀑布流布局" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li> <li><img src="http://img.daimajiayuan.com/uploads/pics/2016/01/site=cssha" alt="jQuery模拟瀑布流布局" alt=""><p>瀑布流思密达瀑布流思密达</p></li> <li><img src="http://img.daimajiayuan.com/uploads/pics/2016/01/site=cssha" alt="jQuery模拟瀑布流布局" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li> </ul> <ul class="list4"> <li><img src="http://img.daimajiayuan.com/uploads/pics/2016/01/site=cssha" alt="jQuery模拟瀑布流布局" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li> <li><img src="http://img.daimajiayuan.com/uploads/pics/2016/01/site=cssha" alt="jQuery模拟瀑布流布局" alt=""><p>瀑布流思密达</p></li> <li><img src="http://img.daimajiayuan.com/uploads/pics/2016/01/site=cssha" alt="jQuery模拟瀑布流布局" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li> </ul></div></body></html>code
零七网部分新闻及文章转载自互联网，供读者交流和学习，若有涉及作者版权等问题请及时与我们联系，以便更正、删除或按规定办理。感谢所有提供资讯的网站，欢迎各类媒体与零七网进行文章共享合作。
