从其他地方看来的，最简化版瀑布流。
大致思路就是：固定几列div，浮动排布。监听滚动条事件，每当滚动条滚动到底部就给div加子项，div高度自动撑高一部分。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
*{margin:0;padding:0}
body{background:#E9E9E9;text-align:center;}
.box_pannel{width:865px;margin:0 auto;overflow:auto;margin-bottom:50px;}
.pic_box{float:left;margin:0 7px;}
.inner_box{width:190px;text-align:center;padding:5px;background:#FFF;margin:10px 0;}
.text_class{font-family:"Microsoft YaHei";font-size:12px;padding:3px;padding-bottom:0;}
.wait_div{position:absolute;left:0;width:100%;padding:5px 0;height:30px;text-align:center;display:none;background:#CCEEFF}
.back_to_top{width:20px;position:fixed;right:50px;bottom:100px;cursor:pointer;background:white}
/*阴影*/
.boxshadow{box-shadow: 0px 3px 4px #C8C8C8;
-moz-box-shadow: 0px 3px 4px #C8C8C8;
-webkit-box-shadow: 0px 3px 4px #C8C8C8;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#C8C8C8')";/* For IE 8 */
}
/*圆角*/
.round {border-radius:5px; /* W3C syntax */
-moz-border-radius:5px; /* Gecko browsers */
-webkit-border-radius:5px; /* Webkit browsers */
}
</style>
</head>
<body>
<div class="box_pannel">
<div id="box1" class="pic_box"></div>
<div id="box2" class="pic_box"></div>
<div id="box3" class="pic_box"></div>
<div id="box4" class="pic_box"></div>
</div>
<div id="waitpart" class="wait_div"><img src="http://files.jb51.net/file_images/article/201211/200803131036175436.gif"/></div>
<div id="backTo" class="back_to_top">返回顶部</div>
<script>
var nowMax=0;//记录目前最后一张图片编号
var restart=0;//标记是否正处于加载数据阶段 如果是则不再触发加载数据 防止在加载数据时连续滚动滚动条造成多次加载数据
var imgArray=[];//图片库
imgArray[0] = "http://i3.sinaimg.cn/photo/2/2013-06-17/U9982P1505T2D2F58DT20150508181451.jpg";
imgArray[1] = "http://i2.sinaimg.cn/photo/2/2013-06-17/U12434P1505T2D2F50DT20150508102721.jpg";
imgArray[2] = "http://www.sinaimg.cn/dy/slidenews/1_t1000/2015_14/45272_82763_3069.jpg";
imgArray[3] = "http://news.xinhuanet.com/local/2015-05/10/1115235372_14312527136311n.jpg";
imgArray[4] = "http://image1.suning.cn/uimg/cms/img/143126116969872352.jpg";
imgArray[5] = "http://image1.suning.cn/uimg/cms/img/143107778329512796.jpg";
imgArray[6] = "http://image3.suning.cn/uimg/cms/img/143108537331205332.jpg";
imgArray[7] = "http://image2.suning.cn/uimg/cms/img/143099470073574885.jpg";
imgArray[8] = "http://image1.suning.cn/uimg/cms/img/143109027707104853.jpg";
imgArray[9] = "http://image3.suning.cn/uimg/cms/img/143130845200517990.jpg";
imgArray[10] = "http://image.suning.cn/b2c/catentries/000000000123129015_1_120x120.jpg";
imgArray[11] = "http://img11.360buyimg.com/da/jfs/t1597/274/11149629/73869/dcd4192d/554c8832N709fd57c.jpg";
imgArray[12] = "http://img12.360buyimg.com/da/jfs/t1330/193/85171822/84632/e27a3d21/5549babcN921bc3ad.jpg";
imgArray[13] = "http://img10.360buyimg.com/da/jfs/t1165/40/829024549/101493/44d0e58/554c1dc8N98a2bdd2.jpg";
imgArray[14] = "http://img30.360buyimg.com/da/jfs/t1339/12/109832324/11887/19a98633/554c93e4Ne7159f17.jpg";
for(var i=0;i<8;i++){//模拟大量图片
imgArray=imgArray.concat(imgArray);
}
//为div增加一张图片框
function addPic(e){
var pic=document.createElement("img");
pic.src=imgArray[nowMax];
pic.style.width="190px";
nowMax++;
var text=document.createElement("div");
text.innerText="这是为了测试";
text.className="text_class";
var box=document.createElement("div");
box.appendChild(pic);
box.appendChild(text);
box.className="inner_box boxshadow round";
e.appendChild(box);
}
//增加一行
function addOneLayer(){
addPic(document.getElementById("box1"));
addPic(document.getElementById("box2"));
addPic(document.getElementById("box3"));
addPic(document.getElementById("box4"));
}
//初始化先加载5行
for(var i=0;i<5;i++){
addOneLayer();
}
//为滚动条滚动加上监听事件
window.onscroll=function(){
//滚动条滚动到底部时 hideHeight+screenHeight=allHeight
var allHeight = document.documentElement.scrollHeight || document.body.scrollHeight;//body的高度
var hideHeight = document.body.scrollTop || document.documentElement.scrollTop;//卷上去的高度
var screenHeight = document.documentElement.clientHeight;//浏览器可见高度
if((hideHeight+screenHeight>=allHeight-20)&&(restart==0)){//当滚动条滚动到底且不在加载数据中时 加载数据
document.getElementById("waitpart").style.display="block";
document.getElementById("waitpart").style.top=(allHeight-40)+"px";//显示出来等待图片
restart=1;//更改加载flag
setTimeout(function(){//延迟一秒后加载三行 延迟一秒是为了制造加载数据的感觉
addOneLayer();
addOneLayer();
addOneLayer();
document.getElementById("waitpart").style.display="none";
restart=0;
},1000);
}
}
//返回顶部
document.getElementById("backTo").onclick=function(){
var uptime=setInterval(function(){
var screenHeight = document.documentElement.clientHeight;
var hideHeight = document.body.scrollTop || document.documentElement.scrollTop;
if(hideHeight>0){
hideHeight-=400;
window.scrollTo(0,hideHeight);
}else{
clearInterval(uptime);
}
},300);
}
</script>
</body>
</html>有个比较明显的缺陷，就是完全按图片数组存储的顺序来排列的。有可能会出现部分列特别长部分列特别短的情况。我的想法就是在每次增加一行的时候，将这几个div对象按长度从小到大排列，然后取出要加的几个图片按图片的高度从大到小排列，这样相对的插入就会好一些。
中间遇到一些问题：
1.例如图片未加载完无法获取图片的宽度和高度，所以通过img的onload函数来解决。我是在每个图片加载完调用onload函数时再递归调用此函数，直到这一行加载完。
2.直接用图片的height属性是不对的，因为获取到的是图片的实际高度，而加载到页面上的是等比例缩小的，所以需要(pic.height)*(190/pic.width)这样，等比缩小一下。
3.ie8以下需要把onload函数写在src=”“前面。
不过还要说的是，这个只算解决了一半吧，因为在ie8测试出现了问题，而且在其他浏览器虽然正常运行但是图片的排列顺序却是每次都不一样，这个有些想不明白，下面是代码，以后再解决吧。
function getPic(picArray,order){
if(picArray==null||picArray==undefined){
var picArray=[];
var order=0;
}
var pic=document.createElement("img");
pic.onload=function(){
picArray.push({pic:pic,height:(pic.height)*(190/pic.width)});
order++;
if(order==4){
var unsortPic=picArray;;
var sortPic=unsortPic.sort(function(a,b){
return b.height-a.height;
});
var boxs=document.getElementById("boxparent").children;
var unsortboxs=[];
for(var i=0;i<boxs.length;i++){
unsortboxs.push(boxs[i]);
}
var sortboxs=unsortboxs.sort(function(a,b){
return a.offsetHeight-b.offsetHeight;
})
for(var k=0;k<sortboxs.length;k++){
var box=document.createElement("div");
box.appendChild(sortPic[k].pic);
box.className="inner_box boxshadow round";
sortboxs[k].appendChild(box);
}
}else{
getPic(picArray,order);
}
};
pic.src=imgArray[nowMax];
pic.style.width="190px";
nowMax++;
}用此段代码替换掉增加一行图片的代码就可以了。
2545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
