瀑布流这张页面加载的图片问题

源自：2-5 onscroll事件实现瀑布流布局的图片加载功能

瀑布流这张页面加载的图片问题

后面加载是加载了，怎么后面效果还是原始的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Document</title>

margin: 0;

padding: 0;

}

#main{

position: relative;

}

.box{

padding: 15px 0 0 15px;

float: left;

}

.pic{

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

box-shadow: 0 0 5px #ccc;

}

.pic img{

width: 165px;

height: auto;

}

</style>

window.onload = function(){

waterfall("main","box");

//模拟一个json数据供加载

var dataint = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'}]}

window.onscroll = function(){

if(checkScrollSlide){

//将数据块渲染到页面的尾部

var oparent = document.getElementById("main");

for(var i=0;i<dataint.data.length;i++){

var obox = document.createElement('div');

obox.className = 'box';

oparent.appendChild(obox);

var opic = document.createElement('div');

obox.className = 'pic';

obox.appendChild(opic);

var oimg = document.createElement('img');

oimg.src = "images/"+dataint.data[i].src;

opic.appendChild(oimg);

}

waterfall("main","box");

}

//检测是否具备了数据加载的条件

function checkScrollSlide(){

var oparent = document.getElementById("main");

var oboxs = getByClass(oparent,"box");

var lastBoxh = oboxs[oboxs.length-1].offsetTop+Math.floor( oboxs[oboxs.length-1].offsetHeight/2);

var scrolltop = document.body.scrollTop||document.documentElement.scrollTop;

var height = document.body.clientHeight||document.documentElement.clientHeight;

return (lastBoxh<scrolltop+height)?true:false;

}

function waterfall(parent,box){

var oparent = document.getElementById(parent);

var oboxs = getByClass(oparent,box);

//计算整个页面的列数

var oboxW = oboxs[0].offsetWidth;

var windowWith = document.documentElement.clientWidth;

var cols = Math.floor(windowWith/oboxW);

//设置main宽度并居中

oparent.style.cssText = 'width:'+oboxW*cols+'px;margin:0 auto';

//存放每一列高度的数组

var hArr = new Array();

for (var i = 0; i < oboxs.length; i++) {

if(i<cols){

hArr.push(oboxs[i].offsetHeight);

}else{

var Minh = Math.min.apply(null,hArr);

var index = getMinIndex(hArr,Minh);

oboxs[i].style.position = "absolute";

oboxs[i].style.top = Minh+'px';

oboxs[i].style.left = oboxs[index].offsetLeft+'px';

hArr[index]+=oboxs[i].offsetHeight;

}

};

}

//获取最小高度的索引

function getMinIndex(hArr,Minh){

for (var i = 0; i < hArr.length; i++) {

var index;

if(hArr[i]==Minh){

index=i;

}

return index;

}

//根据class获取同元素

function getByClass(parent,cls){

var boxArray = new Array(),

oElements = parent.getElementsByTagName("*");

for(var i=0;i<oElements.length;i++){

if(oElements[i].className==cls){

boxArray.push(oElements[i]);

}

return boxArray;

}

</script>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

提问者：慕仰0443758 2017-03-25 12:01

瀑布流这张页面加载的图片问题

个回答