1.瀑布流的實(shí)現(xiàn)原理：
通過計(jì)算出一排能夠容納幾列元素，然后找到各列之中所有元素高度之和的最小者，并將新的元素添加到該列上，然后繼續(xù)尋找所有列的各元素之和的最小者，繼續(xù)添加至該列上，如此循環(huán)下去，直至所有元素均能夠按要求排列為止
2.效果圖
瀑布流.png
3.基本思想
- 使用
flex布局，將container劃分為等分的4列。 - 對所有的
img設(shè)置一個寬度100%,即就是保證這些圖的寬度剛好充滿整個列。 - 為了美觀，我給圖片加上了一些
css3特效，淡入淡出以及hover放大
等分4列
圖片寬度設(shè)置相同
html結(jié)構(gòu)
<body>
<div class="container">
<div class="item" id="one">
</div>
<div class="item" id="two">
</div>
<div class="item" id="three">
</div>
<div class="item" id="four">
</div>
</div>
</body>
css
body{
margin: 0;
padding: 0;
background-color: #ededed;
}
.container{
width: 80%;
display: flex;
flex-direction: row;
margin: 0 auto;
}
.item{
flex: 1;
margin: 16px;
transition: all 0.3s ease-in-out;
}
img{
width: 100%;
border: 10px solid white;
margin-top: 8px;
}
img:hover{
transform: scale(1.05);
cursor: pointer;
box-shadow:0px 3px 2px 1px #999;
}
接下來就是我的js了
- 動態(tài)插入圖片
- 給瀏覽器時間渲染，也就是設(shè)置定時器
- 尋找最低的列
var endScroll=window.screen.height+500;//預(yù)期結(jié)束的位置
//加載頁面
window.onload=function(){
var canScroll=document.documentElement.scrollHeight;//可以滾動的高度
var alreadyScorll=document.documentElement.scrollTop;
insertImg();
window.document.addEventListener('scroll',function(){
if(alreadyScorll+window.screen.height>canScroll){
endScroll+=500;
insertImg();
}
});
}
//動態(tài)插入圖片
var insertImg=function(){
var imgId=0;
//設(shè)置定時器讓瀏覽器有時間渲染
var timer=setInterval(function(){
var canScroll=document.documentElement.scrollHeight;//可以滾動的高度
if(canScroll>endScroll){
clearInterval(timer);
}
imgId++;
if(imgId>14){
imgId=1;//我的圖片只有14張
}
var img=document.createElement('img');
img.setAttribute('src','img/'+imgId+'.jpg');
minCOlum().appendChild(img);
},100)
}
//尋找高度最小的列
var minCOlum=function(){
var pb1=document.getElementById('one');
var pb2=document.getElementById('two');
var pb3=document.getElementById('three');
var pb4=document.getElementById('four');
var pb1Height=cuculate(pb1.children);
var pb2Height=cuculate(pb2.children);
var pb3Height=cuculate(pb3.children);
var pb4Height=cuculate(pb4.children);
var minHeight=Math.min(pb1Height,pb2Height,pb3Height,pb4Height);
if(minHeight==pb1Height){
return pb1;
}else if(minHeight==pb2Height){
return pb2;
}else if(minHeight==pb3Height){
return pb3;
}else{
return pb4;
}
}
//計(jì)算最小高度的列
var cuculate=function(pbimg){
if(pbimg==null||pbimg.length==0){
return 0;
}else{
var height=0;
for(var i=0;i<pbimg.length;i++){
height+=pbimg[i].height;
}
return height;
}
}
最后再附上效果圖
好了，瀑布流布局今天就先到這里啦
