• 瀑布流


    <!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{ 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 = ''+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 

  • 相关阅读:
    继承与多态
    本周总结
    总结
    周总结
    周总结
    第三周总结
    .......
    .....
    ....
    ....
  • 原文地址:https://www.cnblogs.com/z-sheng/p/4434142.html
Copyright © 2020-2023  润新知