瀑布流

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
    *{padding: 0;margin:0;}
	
	#main{ position:relative; margin:0 auto;}
	.pin{ padding:15px 0 0 15px; float:left;}
	.box{ padding:10px; border:1px solid #ccc; border-radius:5px; box-shadow:0 0 5px #ccc; }
	.box img{ width:162px; height:auto;}
</style>

<script>
window.onload=function(){
			show('main','pin');
	//模拟后台数据
	var dataInt={'data':[{'src':'0.jpg'},{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'}]};
	window.onscroll=function(){
		if(check){
			var op = document.getElementById('main'); //父盒子
			//将数据渲染到页面底部
			for(var i=0;i<dataInt.data.length; i++){
				//创建divA 
				var divA = document.createElement('div');
				divA.className = 'pin';
				op.appendChild(divA); 
				
				//创建divB
				var divB = document.createElement('div');
				divB.className = 'box';
				divA.appendChild(divB);
				
				//创建IMG
				var oimg = document.createElement('img');
				oimg.src = 'images/'+dataInt.data[i].src;
				divB.appendChild(oimg);
				 
			}
			show('main','pin');
		}	
	};
}

function show(parent,box){
	var op = document.getElementById(parent); //父盒子 
	var clas = getByClass(op,'pin');	//返回class 数组
	var obox = clas[0].offsetWidth; //获取一个盒子的宽度
	var cols = Math.floor((document.documentElement.clientWidth||document.body.clientWidth)/obox);  
	var boxHeight = []; //第一排图片高度 的数组
	op.style.cssText = 'width:'+obox*cols+'px'; //设置 op 宽度；
	
	for(var j=0; j<clas.length; j++){
		if(j<cols){  //判断的第一排图片
			boxHeight.push(clas[j].offsetHeight);   //将高度放在数组
		}else{
			var minH = Math.min.apply(null,boxHeight);  //获取boxHeight数组中最小的值
			var index = geiminIndex(boxHeight,minH);    //获取boxHeight最小值的索引
			
			clas[j].style.position = 'absolute';
			clas[j].style.top = minH + 'px';
			clas[j].style.left = clas[index].offsetLeft +'px';
			
			boxHeight[index] += clas[j].offsetHeight;     //
			
		}
	}
	//alert(op.offsetWidth);
	//console.log(boxHeight)
	//console.log(minH)
}

function geiminIndex(arr,val){
	for(var i in arr){
		if(arr[i]==val){
			return i;
		}
	}
};

function getByClass(parent,cla){
	var els = [];
	var tots = parent.getElementsByTagName('*');
	for(var i=0; i<tots.length; i++){
		if(tots[i].className==cla){
			els.push(tots[i]);
		}
	}
	
	return els;
};

//加载图片的条件
function check(){
	var op = document.getElementById('main'); //父盒子 
	var clas = getByClass(op,'pin');	//返回class 数组
	//页面最后的一个盒子，距离顶部的距离
	var last = clas[clas.length-1].offsetTop+Math.floor(clas[clas.length-1].offsetHeight/2);  
	//滚动距离加窗口的高度
	var scrollTop = (document.documentElement.clientHeight || document.body.clientHeight) + (document.documentElement.scrollTop || document.body.scrollTop)
	return last < scrollTop ? true : false;
	
}
</script>
</head>
<body>
<div id="main">
    <div class="pin">
        <div class="box">
            <img src="./images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/3.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/4.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/5.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/6.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/7.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/8.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/9.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/10.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/11.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/12.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/13.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/14.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/15.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/16.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/17.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/18.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/19.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/20.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/21.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/20.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/21.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/20.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/21.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/20.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/21.jpg"/>
        </div>
    </div>
</div>
</body>
</html>
　javascript方法：原生js实现方法存在bug　
posted @ 2015-04-17 10:22 背包旅行的蚂蚁阅读(119) 评论(0) 收藏举报
刷新页面返回顶部
背包旅行的蚂蚁

瀑布流

公告
