效果图：
一、满足功能的实现（低端版：js有全部变量）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>瀑布流</title> 6 <style> 7 .content { 8 margin: 0 auto; 9 width: 1000px; 10 background-color: gainsboro; 11 } 12 13 .left { 14 float: left 15 } 16 17 .item { 18 width: 25%; 19 text-align: center; 20 } 21 22 .border { 23 border: 1px solid red; 24 } 25 26 img { 27 width: 230px; 28 } 29 30 .clearfix:after { 31 content: "clear"; 32 clear: both; 33 display: block; 34 visibility: hidden; 35 height: 0; 36 } 37 </style> 38 </head> 39 <body> 40 <h1>瀑布流美女</h1> 41 <div class="content clearfix"> 42 <div class="left item"></div> 43 <div class="left item"></div> 44 <div class="left item"></div> 45 <div class="left item"></div> 46 </div> 47 <script src="/static/js/jquery-1.11.0.js"></script> 48 <script> 49 $(function () { 50 initImg(); 51 scrollEvent(); 52 }) 53 NID = 0 54 LASTPOSITION=3 //记录图片放置位置 55 function initImg() { 56 $.ajax({ 57 url: "get_imgs.html", 58 type: "GET", 59 data: {"id": NID}, 60 dataType: "json", 61 success: function (arg) { 62 $.each(arg, function (index, v) { 63 eqv=(index+LASTPOSITION+1) % 4 64 tag = document.createElement("img"); 65 tag.src = "/" + v.href; 66 $(".content").children().eq(eqv).append(tag) 67 if (index + 1 == arg.length) { 68 {#NID=arg.length;#} 69 LASTPOSITION=eqv; 70 } 71 }) 72 } 73 }) 74 } 75 76 function scrollEvent() { 77 $(window).scroll(function () { 78 //文档高度 79 var docLength = $(document).height(); 80 //窗口高度 81 var winLength = $(window).height(); 82 //滚动条滚动高度 83 var scrollLength = $(window).scrollTop(); 84 {#console.log(docLength, winLength, scrollLength, parseInt(winLength + scrollLength+1))#} 85 if (winLength+scrollLength+1>=docLength) { //此处scrollLength是小数，所以不能直接等于 86 {#alert("ok")#} 87 initImg(); 88 {#console.log(5)#} 89 } 90 }) 91 } 92 </script> 93 </body> 94 </html>