使用js实现瀑布流
//樣式
*{
padding: 0;
margin: 0;
}
#main {
position: relative;
}
.box {
padding: 15px 0 0 15px;
float: left;
}
.pic {
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 5px;
border-radius: 5px;
}
.pic img {
width: 192px;
height: auto;
}
//結構部分
<div id="main">
<div class="box">
<div class="pic">
<img src="p_00.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="p_01.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="p_02.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="p_03.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="p_04.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="p_05.jpg" />
</div>
</div>
<div>
//交互部分
window.onload = function() {
waterfall("main","box");
var dataInt = {"data": [{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.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");
oPic.className = "pic";
oBox.appendChild(oPic);
var oImg = document.createElement("img");
oImg.src = dataInt.data[i].src;
oPic.appendChild(oImg);
}
waterfall("main","box"); // 設置新添加圖片的位置
}
};
};
function waterfall(parent,box){
//取main下所有class為box的元素
var oParent = document.getElementById(parent);
var oBoxs = getByClass(oParent,box);
//計算頁面顯示的列數（頁面的寬度/box的寬度）
var oBoxW = oBoxs[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
//設置main的寬度
oParent.style.cssText = "width:" + oBoxW*cols + "px; margin: 0 auto";
var hArr = []; // 存放每一列高度的數組
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 = getMinhIndex(hArr, minH);
oBoxs[i].style.position="absolute";
oBoxs[i].style.top=minH + "px";
//oBoxs[i].style.left=oBoxW * index + "px";
oBoxs[i].style.left=oBoxs[index].offsetLeft + "px";
hArr[index] += oBoxs[i].offsetHeight;
}
}
}
//根據class獲取元素
function getByClass(parent, clsName){
var boxArr = []; //存儲所又獲取到的class為box的元素
var oElements = parent.getElementsByTagName('*');
for(var i =0;i<oElements.length;i++){
if(oElements[i].className == clsName){
boxArr.push(oElements[i]);
}
}
return boxArr;
}
function getMinhIndex (arr, val){
for(var i in arr){
if(arr[i] == val){
return i;
}
}
}
//檢測是否具備了滾動條加載數據塊的條件
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;
}
轉載于:https://www.cnblogs.com/liushuang001/p/5308018.html
總結
