今天簡單寫下瀑布流特效
1,先放8張圖片看看
<body>
<div id="container">
<div class="box"><div class="box-img"><img src="img/pbl/1.jpg" alt=""/></div></div>
<div class="box"><div class="box-img"><img src="img/pbl/2.jpg" alt=""/></div></div>
<div class="box"><div class="box-img"><img src="img/pbl/3.jpg" alt=""/></div></div>
<div class="box"><div class="box-img"><img src="img/pbl/4.jpg" alt=""/></div></div>
<div class="box"><div class="box-img"><img src="img/pbl/5.jpg" alt=""/></div></div>
<div class="box"><div class="box-img"><img src="img/pbl/6.jpg" alt=""/></div></div>
<div class="box"><div class="box-img"><img src="img/pbl/7.jpg" alt=""/></div></div>
<div class="box"><div class="box-img"><img src="img/pbl/8.jpg" alt=""/></div></div>
</div>
</body>
2,簡單佈局下
<style>
*{
padding:0;
margin:0;
}
img{
vertical-align: middle;
}
#container{
position: relative;
}
#container .box{
float:left;
padding-right:10px;
padding-top:10px;
}
#container .box .box-img{
padding:5px;
border:1px solid #ccc;
border-radius:5px;
background-color: #eee;
}
</style>
樣式中沒有設置container的寬度和居中,因爲本次想做自適應瀏覽器寬度的效果(即每行圖片的個數是動態的,自適應瀏覽器寬度的)
3,由於沒有後臺數據,圖片數據通過文件導入了
<script src="data/pbl_JSON.js"></script>
文件是var pbl=[{src:"img/pbl/1.jpg"},{src:"img/pbl/2.jpg"},{src:"img/pbl/3.jpg"}...]的形式!
若有後臺數據可用ajax方法請求,js實現的代碼差異不會很大
4,採用原生js實現效果!
如下遍歷元素採用了2種方法均能實現,後續會再總結其他的方法添加進來!
<script>
var container=document.getElementById("container");
var n=-1;//記錄加載的次數
//事件監聽,待文件,圖片等加載完成後運行,防止出現用es6方法先調用後定義未定義而報錯!!
window.addEventListener("load",function(){
imgLocation("box");
//判斷如果滾動距離+瀏覽器高度>最後一張圖片的offsetTop,則進行加載圖片
this.addEventListener("scroll",function(){
isScroll=false;
//實現有限的數據加載
// if(checkAdd("box")){
// n++;
// for(var i=0;i<8;i++){//每次追加8張圖片
// if(8+n*8+i>=pbl.length)return false;//當數據提供的圖片全部加載完成之後跳出來!
// var div1=document.createElement("div");
// div1.className="box";
// container.appendChild(div1);
// var div2=document.createElement("div");
// div2.className="box-img";
// div1.appendChild(div2);
// var img=new Image();
// img.src=pbl[8+n*8+i].src;
// div2.appendChild(img);
// }
// //執行加載
// imgLocation("box");
// }
//實現無限數據加載
if(checkAdd("box")){
pbl.forEach(function(item){
var div1=document.createElement("div");
div1.className="box";
container.appendChild(div1);
var div2=document.createElement("div");
div2.className="box-img";
div1.appendChild(div2);
var img=new Image();
img.src=item.src;
div2.appendChild(img);
})
//執行加載
imgLocation("box");
}
},false);
},false);//false是冒泡階段執行,true是捕獲階段執行
//1 定義獲取子元素集合的方法
function getChild(child){
var tagsAll=container.getElementsByTagName("*");
var childArr=[];
//for循環遍歷
for(var i=0;i<tagsAll.length;i++){
if(tagsAll[i].className==child){
childArr.push(tagsAll[i]);
}
}
//forEach遍歷數組
// [...tagsAll].forEach(function(item){//...tagsAll是將集合編程的那個的元素,ES6擴展運算符
// if(item.className==child){
// childArr.push(item);
// }
// })
// console.log(childArr);
return childArr;
}
//2 (完成佈局)把圖片居中並隨着瀏覽器的寬度改變,一排顯示的圖片數量也改變,並且container居中!
function imgLocation(child){
var box=getChild(child);
var imgW=box[0].offsetWidth;
//var num=Math.floor(document.documentElement.clientWidth/imgW);//使用Math.floor運算符向下取整
var num=~~(document.documentElement.clientWidth/imgW);//位運算~~,表示去掉小數部分
container.style.cssText="width:"+imgW*num+"px;margin:0 auto";//使container居中
//3 計算每列的最小高度和對應的索引值
var heightArr=[];
var minIndex=0;
[...box].forEach(function(item,index){
if(index<num){
heightArr.push(item.offsetHeight);
}else{
//獲得最小高度:minHeight (用apply方法或者...[]方法)
// var minHeight=Math.min.apply(null,heightArr);
var minHeight=Math.min(...heightArr);
//獲得最小高度的索引值:minIndex
heightArr.forEach(function(item,index){
if(item==minHeight){
minIndex=index;
}
})
//4 將索引值在num後面的圖片放在最小高度的後面
item.style.cssText="position:absolute;top:"+minHeight+"px;left:"+box[minIndex].offsetLeft+"px";
//5 之後更新heightArr[minIndex]的值,使後面的圖片不斷進行高度比較!
heightArr[minIndex]+=item.offsetHeight;
console.log(heightArr);
}
})
}
//最後 判斷鼠標滾動事件進行加載
function checkAdd(child){
var box=getChild(child);
var lastBox=box[box.length-1];
var lastTop=lastBox.offsetTop;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var clientH=document.documentElement.clientHeight||document.body.clientHeight;
if(scrollTop+clientH>lastTop){
console.log(1);
return true;
}
}
</script>
若有問題請提出,謝謝~