瀑布流这张页面加载的图片问题
慕仰0443758
2017-03-25 12:01
后面加载是加载了，怎么后面效果还是原始的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
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>
<script type="text/javascript">
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 id="main">
<div>
<div>
<img src="images/0.jpg">
</div>
</div>
<div>
<div>
<img src="images/1.jpg">
</div>
</div>
<div>
<div>
<img src="images/2.jpg">
</div>
</div>
<div>
<div>
<img src="images/3.jpg">
</div>
</div>
<div>
<div>
<img src="images/4.jpg">
</div>
</div>
<div>
<div>
<img src="images/5.jpg">
</div>
</div>
<div>
<div>
<img src="images/6.jpg">
</div>
</div>
<div>
<div>
<img src="images/7.jpg">
</div>
</div>
<div>
<div>
<img src="images/8.jpg">
</div>
</div>
<div>
<div>
<img src="images/9.jpg">
</div>
</div>
<div>
<div>
<img src="images/10.jpg">
</div>
</div>
<div>
<div>
<img src="images/11.jpg">
</div>
</div>
<div>
<div>
<img src="images/12.jpg">
</div>
</div>
<div>
<div>
<img src="images/13.jpg">
</div>
</div>
<div>
<div>
<img src="images/14.jpg">
</div>
</div>
<div>
<div>
<img src="images/15.jpg">
</div>
</div>
<div>
<div>
<img src="images/16.jpg">
</div>
</div>
<div>
<div>
<img src="images/17.jpg">
</div>
</div>
<div>
<div>
<img src="images/18.jpg">
</div>
</div>
<div>
<div>
<img src="images/19.jpg">
</div>
</div>
<div>
<div>
<img src="images/20.jpg">
</div>
</div>
<div>
<div>
<img src="images/21.jpg">
</div>
</div>
<div>
<div>
<img src="images/22.jpg">
</div>
</div>
<div>
<div>
<img src="images/23.jpg">
</div>
</div>
<div>
<div>
<img src="images/24.jpg">
</div>
</div>
<div>
<div>
<img src="images/0.jpg">
</div>
</div>
<div>
<div>
<img src="images/1.jpg">
</div>
</div>
<div>
<div>
<img src="images/2.jpg">
</div>
</div>
<div>
<div>
<img src="images/3.jpg">
</div>
</div>
<div>
<div>
<img src="images/4.jpg">
</div>
</div>
<div>
<div>
<img src="images/5.jpg">
</div>
</div>
<div>
<div>
<img src="images/6.jpg">
</div>
</div>
<div>
<div>
<img src="images/7.jpg">
</div>
</div>
<div>
<div>
<img src="images/8.jpg">
</div>
</div>
<div>
<div>
<img src="images/9.jpg">
</div>
</div>
<div>
<div>
<img src="images/10.jpg">
</div>
</div>
<div>
<div>
<img src="images/11.jpg">
</div>
</div>
<div>
<div>
<img src="images/12.jpg">
</div>
</div>
<div>
<div>
<img src="images/13.jpg">
</div>
</div>
<div>
<div>
<img src="images/14.jpg">
</div>
</div>
<div>
<div>
<img src="images/15.jpg">
</div>
</div>
<div>
<div>
<img src="images/16.jpg">
</div>
</div>
<div>
<div>
<img src="images/17.jpg">
</div>
</div>
<div>
<div>
<img src="images/18.jpg">
</div>
</div>
<div>
<div>
<img src="images/19.jpg">
</div>
</div>
<div>
<div>
<img src="images/20.jpg">
</div>
</div>
<div>
<div>
<img src="images/21.jpg">
</div>
</div>
<div>
<div>
<img src="images/22.jpg">
</div>
</div>
<div>
<div>
<img src="images/23.jpg">
</div>
</div>
<div>
<div>
<img src="images/24.jpg">
</div>
</div>
</div>
</body>
</html>
1回答
-
- love丽
- 2017-03-27 09:56:15
main里边的子div没有定义类名box，在调用waterfall函数时传入的第二个参数box是不存在的，所以没有效果，而且main里边的后代元素也没有定义类名，样式效果也没有
瀑布流布局
97759 学习 · 736 问题
相似问题