蘑菇街-瀑布流佈局

最終效果以下：

思路分析：

 

咱們有不少圖片，設置相同的寬度，高度不作設置，後面自動獲取。
當對全部圖片浮動後，圖片會自動換行排列。

瀑布流：對圖片進行設置，進行一個最優的排列。如上圖所示，當一行排列完成後，後續的圖片該如何排列？

這裏有，對後續圖片進行處理，找出圖片高度最小的那張圖片，將它排列到第一行（上一列高度最小的那一列）。
這裏圖片7最小，將它放置到圖片1下面。以下所示：

上圖組成新的一行，圖片3爲高度最小那一列，重複操做，將後續圖片最小放置到圖片3下。

 

一直循環，直至全部圖片排列結束。完成瀑布流樣式佈局。

 

具體代碼以下：
html部分代碼，圖片能夠放不少張。

 

css代碼：

<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
}
.box>div{
float: left;
padding: 5px;
}

.pic img{
border: 1px solid silver;
padding: 5px;
width: 167px;
border-radius: 10px;
}
</style>

　　

js代碼：

`//讓圖片加載完成在執行JS代碼 方便93行 打印每張照片的高度
window.onload=function(){
// 獲取元素
//獲取全部圖片
var pic=document.querySelectorAll(".pic");
//獲取大盒子 由於要box容器居中
var box=document.querySelector(".box");
```

//求出單個pic元素的寬度
var picWidth=pic[0].offsetWidth;
// console.log(picWidth);作的習慣打印，看看是否是正確

//求出瀏覽器的寬度
var screenWidth=document.body.offsetWidth;
// console.log(screenWidth);

//求出一行能夠放多少列
var cols=Math.floor(screenWidth/picWidth);
// console.log(cols);6

//給box容器設置寬度
box.style.width=cols*picWidth+"px";
// console.log(box.offsetWidth);

//讓main容器在頁面中水平居中
box.style.margin="0 auto";

//對第二行圖片進行設置 將第一張定位到第一行高度最小的位置
//使用數組保存第一行元素的高度
var arrHeight=[];
for(var i=0;i<pic.length;i++){
//定義一個變量 用來表示每一個圖片的高度
var picHeight=pic[i].offsetHeight;
// console.log(picHeight);
//若是小於第一行6張照片
if(i<cols){
//把高度儲存到定義的數組中
arrHeight.push(picHeight);
// console.log(arrHeight);
}else{
//找出除第一行外其餘圖片中高度最小的 並賦值給minHeightbox
var minHightbox= Math.min.apply(" ",arrHeight);
// console.log(minHightbox)

//z最矮元素高度的索引 是第幾張
var minIndex=getMinIndex(arrHeight,minHightbox);
//定位
pic[i].style.position="absolute";

//設置pic[i]的top值
pic[i].style.top = minHightbox + "px";

//設置pic[i]的left值
pic[i].style.left = picWidth * minIndex + "px";

//更新最矮元素的高度
arrHeight[minIndex]+=picHeight;
}
}//循環到這裏

//獲取下標方法
function getMinIndex(arr, val){
for(var j=0; j<arr.length; j++){
if(arr[j] === val){
return j;
}
}
// console.log(j);
// 第六張最小
}
}`