向下滑動網頁的時候能夠自動載入圖片並顯示。 盛放圖片的盒子模型如下： 設置img-width為150px，然後box_img添加內邊距和陰影效果，box的外邊距為0，添加內邊距。盒子的寬度是由img-width和邊距撐開的。也就是說盒子之間是沒有間距的，但是盒子內部有一些邊距的效果。這樣在js設置位 ...
向下滑動網頁的時候能夠自動載入圖片並顯示。
盛放圖片的盒子模型如下：
<div class="box"> <div class="box_img"> <img src="Img/8.jpg"> </div> </div>
設置img-width為150px，然後box_img添加內邊距和陰影效果，box的外邊距為0，添加內邊距。盒子的寬度是由img-width和邊距撐開的。也就是說盒子之間是沒有間距的，但是盒子內部有一些邊距的效果。這樣在js設置位置的時候就不用考慮邊距問題，直接調用box的寬度就可以了。
設置盛放所有box的div的position為relative，這樣在設置top值或是left值的時候，就不用考慮最外層的margin屬性。
放置圖片的位置：獲得第一行圖片的高度並且存放在數組裡面，接下來的圖片設置position為absolute，放置在高度最小的圖片的下麵，然後設置top和left，並且把數組的最小值加上新放置的圖片的高度。也就是說HTML裡面原始放置的圖片除了第一行以外，其他的圖片都是在js裡面又重新定位的。
當滑動頁面到底部的時候觸發事件函數，緊接著放置一些圖片，這樣保證圖片的無限載入。
HTML文件：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="waterfall.css" type="text/css"> 7 <script src="waterfall.js"></script> 8 </head> 9 <body> 10 <div id="content"> 11 <div class="box"> 12 <div class="box_img"> 13 <img src="Img/1.jpg"> 14 </div> 15 </div> 16 <div class="box"> 17 <div class="box_img"> 18 <img src="Img/2.jpg"> 19 </div> 20 </div> 21 <div class="box"> 22 <div class="box_img"> 23 <img src="Img/3.jpg"> 24 </div> 25 </div> 26 <div class="box"> 27 <div class="box_img"> 28 <img src="Img/4.jpg"> 29 </div> 30 </div> 31 <div class="box"> 32 <div class="box_img"> 33 <img src="Img/5.jpg"> 34 </div> 35 </div> 36 <div class="box"> 37 <div class="box_img"> 38 <img src="Img/6.jpg"> 39 </div> 40 </div> 41 <div class="box"> 42 <div class="box_img"> 43 <img src="Img/7.jpg"> 44 </div> 45 </div> 46 <div class="box"> 47 <div class="box_img"> 48 <img src="Img/8.jpg"> 49 </div> 50 </div> 51 <div class="box"> 52 <div class="box_img"> 53 <img src="Img/9.jpg"> 54 </div> 55 </div> 56 <div class="box" > 57 <div class="box_img"> 58 <img src="Img/10.jpg"> 59 </div> 60 </div> 61 <div class="box"> 62 <div class="box_img"> 63 <img src="Img/1.jpg"> 64 </div> 65 </div> 66 <div class="box"> 67 <div class="box_img"> 68 <img src="Img/2.jpg"> 69 </div> 70 </div> 71 <div class="box"> 72 <div class="box_img"> 73 <img src="Img/3.jpg"> 74 </div> 75 </div> 76 <div class="box"> 77 <div class="box_img"> 78 <img src="Img/4.jpg"> 79 </div> 80 </div> 81 <div class="box"> 82 <div class="box_img"> 83 <img src="Img/5.jpg"> 84 </div> 85 </div> 86 <div class="box"> 87 <div class="box_img"> 88 <img src="Img/6.jpg"> 89 </div> 90 </div> 91 <div class="box"> 92 <div class="box_img"> 93 <img src="Img/7.jpg"> 94 </div> 95 </div> 96 <div class="box"> 97 <div class="box_img"> 98 <img src="Img/8.jpg"> 99 </div> 100 </div> 101 <div class="box"> 102 <div class="box_img"> 103 <img src="Img/9.jpg"> 104 </div> 105 </div> 106 <div class="box" > 107 <div class="box_img"> 108 <img src="Img/10.jpg"> 109 </div> 110 </div> 111 <div class="box"> 112 <div class="box_img"> 113 <img src="Img/1.jpg"> 114 </div> 115 </div> 116 <div class="box"> 117 <div class="box_img"> 118 <img src="Img/2.jpg"> 119 </div> 120 </div> 121 <div class="box"> 122 <div class="box_img"> 123 <img src="Img/3.jpg"> 124 </div> 125 </div> 126 <div class="box"> 127 <div class="box_img"> 128 <img src="Img/4.jpg"> 129 </div> 130 </div> 131 <div class="box"> 132 <div class="box_img"> 133 <img src="Img/5.jpg"> 134 </div> 135 </div> 136 <div class="box"> 137 <div class="box_img"> 138 <img src="Img/6.jpg"> 139 </div> 140 </div> 141 <div class="box"> 142 <div class="box_img"> 143 <img src="Img/7.jpg"> 144 </div> 145 </div> 146 <div class="box"> 147 <div class="box_img"> 148 <img src="Img/8.jpg"> 149 </div> 150 </div> 151 <div class="box"> 152 <div class="box_img"> 153 <img src="Img/9.jpg"> 154 </div> 155 </div> 156 <div class="box" > 157 <div class="box_img"> 158 <img src="Img/10.jpg"> 159 </div> 160 </div> 161 <div class="box"> 162 <div class="box_img"> 163 <img src="Img/1.jpg"> 164 </div> 165 </div> 166 <div class="box"> 167 <div class="box_img"> 168 <img src="Img/2.jpg"> 169 </div> 170 </div> 171 <div class="box"> 172 <div class="box_img"> 173 <img src="Img/3.jpg"> 174 </div> 175 </div> 176 <div class="box"> 177 <div class="box_img"> 178 <img src="Img/4.jpg"> 179 </div> 180 </div> 181 <div class="box"> 182 <div class="box_img"> 183 <img src="Img/5.jpg"> 184 </div> 185 </div> 186 <div class="box"> 187 <div class="box_img"> 188 <img src="Img/6.jpg"> 189 </div> 190 </div> 191 <div class="box"> 192 <div class="box_img"> 193 <img src="Img/7.jpg"> 194 </div> 195 </div> 196 <div class="box"> 197 <div class="box_img"> 198 <img src="Img/8.jpg"> 199 </div> 200 </div> 201 <div class="box"> 202 <div class="box_img"> 203 <img src="Img/9.jpg"> 204 </div> 205 </div> 206 <div class="box" > 207 <div class="box_img"> 208 <img src="Img/10.jpg"> 209 </div> 210 </div> 211 <div class="box"> 212 <div class="box_img"> 213 <img src="Img/1.jpg"> 214 </div> 215 </div> 216 <div class="box"> 217 <div class="box_img"> 218 <img src="Img/2.jpg"> 219 </div> 220 </div> 221 <div class="box"> 222 <div class="box_img"> 223 <img src="Img/3.jpg"> 224 </div> 225 </div> 226 <div class="box"> 227 <div class="box_img"> 228 <img src="Img/4.jpg"> 229 </div> 230 </div> 231 <div class="box"> 232 <div class="box_img"> 233 <img src="Img/5.jpg"> 234 </div> 235 </div> 236 <div class="box"> 237 <div class="box_img"> 238 <img src="Img/6.jpg"> 239 </div> 240 </div> 241 <div class="box"> 242 <div class="box_img"> 243 <img src="Img/7.jpg"> 244 </div> 245 </div> 246 <div class="box"> 247 <div class="box_img"> 248 <img src="Img/8.jpg"> 249 </div> 250 </div> 251 <div class="box"> 252 <div class="box_img"> 253 <img src="Img/9.jpg"> 254 </div> 255 </div> 256 <div class="box" > 257 <div class="box_img"> 258 <img src="Img/10.jpg"> 259 </div> 260 </div> 261 </div> 262 </body> 263 </html>View Code
CSS文件：
1 *{ 2 margin: 0; 3 padding:0; 4 } 5 #content{ 6 position: relative; 7 background-color: #006000; 8 } 9 .box{ 10 padding: 5px; 11 float: left; 12 } 13 .box_img{ 14 padding: 5px; 15 border: 1px solid #cccccc; 16 box-shadow: 0 0 5px #cccccc;
