图片瀑布流的实现

效果图：
图片瀑布流的实现
一、满足功能的实现（低端版：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>
HTML页面