JS结合PHP瀑布流,JS实现瀑布流布局的实例分析

本文实例为大家分享了JS实现瀑布流布局展示的具体代码，供大家参考，具体内容如下

html部分

瀑布流布局

css部分

*{

padding:0px;

margin:0px;

}

.main{

position:relative;

}

.box{

padding:15px 0 0 10px;

float:left;

}

.pic{

padding:10px;

border: 1px solid #ccc;

border-radius: 5px;

box-shadow: 0 0 5px #ccc;

/*float:left;*/

}

img{

width:170px;

height:auto;

}

JS部分

window.οnlοad=function(){

waterfall('main','box');

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

window.οnscrοll=function(){

if(checkScrollSlide){

for(var i=0;i

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

var box=document.createElement("p");

box.className="box";

oparent.appendChild(box);

var pic=document.createElement("p");

pic.className="pic";

box.appendChild(pic);

var img=document.createElement("img");

img.src="wallpoll/"+dataInt.data[i].src;

pic.appendChild(img);

}

}

waterfall('main','box');

}

}

function waterfall(parent,child){

var oparent=document.getElementById(parent);

var boxs=oparent.getElementsByClassName(child);

var boxw=boxs[0].offsetWidth;

var cols=Math.floor(document.documentElement.clientWidth/boxw);

oparent.style.cssText="width:"+cols*boxw+"px;margin:0 auto";

var harr=new Array();

for(var i=0;i

if(i

harr.push(boxs[i].offsetHeight);

}else{

var minH=Math.min.apply(null,harr);

var index=getMinhIndex(harr,minH);

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

boxs[i].style.top=minH+"px";

boxs[i].style.left=boxs[index].offsetLeft+"px";

harr[index]+=boxs[i].offsetHeight;

}

}

}

function getMinhIndex(arr,val){

for(var i in arr){

if(arr[i]===val){

return i;

}

}

}

function checkScrollSlide(){

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

var boxs=oparent.getElementsByClassName("box");

var lastBox=boxs[boxs.length-1];

var height=lastBox.offsetTop+Math.floor(lastBox.offsetHeight/2);

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

// console.log(scrollHeigth);

var seeHeigth=document.documentElement.clientHeigth || document.body.clientHeigth;

return seeHeigth+scrollHeigth>height?true:false;

}

课程地址。