向下滑动网页的时候能够自动加载图片并显示。
盛放图片的盒子模型如下：
<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>
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;
17 border-radius: 5px;
18 }
19 img{
20 width: 150px;
21 height: auto;
22 }
js文件：
Math.floor()函数能够向下取整。
Math.min.apply(null,heightArr);函数能获得heightArr数组的最小值。
window.onscroll=function(){}；滑动页面的时候触发这个函数。
document.documentElement.clientHeight；浏览器显示出来的高度。
document.documentElement.scrollTop；滑动的距离。
/**
* Created by asua on 2016/4/9.
*/
window.onload=function(){
imgLocation("content","box");
var lodeImage={"Date":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},]}
window.onscroll=function(){
if(checkFlag()){
for(var i=0;i<lodeImage.Date.length;i++){
var box=document.createElement("div");
box.className="box";
var cparent=document.getElementById("content");
cparent.appendChild(box);
var box_img=document.createElement("div");
box_img.className="box_img";
box.appendChild(box_img);
var img=document.createElement("img");
img.src="Img/"+lodeImage.Date[i].src;
box_img.appendChild(img);
}
imgLocation("content","box");
}
}
}
function checkFlag(){
var cparent=document.getElementById("content");
var ccontent=getChildElement(cparent,"box");
var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
console.log(lastContentHeight+":"+scrollHeight+":"+pageHeight);
if(lastContentHeight<scrollHeight+pageHeight){
return true;
}
}
function imgLocation(parent,child){
var cparent=document.getElementById(parent);
var ccontent=getChildElement(cparent,child);
var imgwidth=ccontent[0].offsetWidth;
var cols=Math.floor(document.documentElement.clientWidth/imgwidth);
cparent.style.cssText="width:"+imgwidth*cols+"px;margin:30px auto";
var heightArr=[];
for(var i=0;i<ccontent.length;i++){
if(i<cols){
heightArr.push(ccontent[i].offsetHeight);
}else{
var minHeight=Math.min.apply(null,heightArr);
var minIndex=getMinIndex(heightArr,minHeight);
ccontent[i].style.position="absolute";
ccontent[i].style.top=minHeight+"px";
ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
heightArr[minIndex]+=ccontent[i].offsetHeight;
}
}
}
function getMinIndex(heightArr,minHeight){
for(var i=0;i<heightArr.length;i++){
if(heightArr[i]==minHeight){
return i;
}
}
}
function getChildElement(parent,content){
var contentArr=[];
var allcontent=parent.getElementsByTagName("*");
for(var i=0;i<allcontent.length;i++){
if(allcontent[i].className==content){
contentArr.push(allcontent[i]);
}
}
return contentArr;
}
效果：
时间： 2024-08-11 05:42:56