瀑布流的效果:
image
瀑布流的排序：
- 每張圖片的寬度是一致的
- 從左往右進行排序，第一排放不下則從第二排從新開始排列
- 第二排或者往后的每排圖片放置的位置為上一排高度最小圖片的下面依次排放
瀑布流實現的原理
- 圖片的位置擺放
- 圖片位置的擺放大致可以不添加樣式一次放置
- 通過設置成塊級元素，進行擺放
- 通過絕對定位來進行擺放
- 瀑布流圖片/div容器的實現是通過對其進行絕對定位來實現的
假設X軸列有4張圖片，寬度為100px; 那第一張left 值為0，第二張left值為100px，第三張為200px,第四張為300px;
圖片的高度，我們需要通過對其圖片的高度進行判斷，讓第二橫對的圖片首先放到 X 列高度最小的圖片下面(如圖所示，一橫列為4張圖片，第五張圖片放在第二橫列中，尋找到第二列的圖片高度最低，就將圖片當道第二列中。第6張圖片尋找到第四列的高度低就將圖片放到第四列中，下面每次都是這樣)
屏幕快照 2018-08-18 下午7.54.27.png3.因為圖片的高度很重要，我們需要保存并進行比較，所以我們要用一個數組來接受圖片的高度
下面我們看一下簡單的示例：
HTML:
<body>
<div class="waterfall">
<img src="http://via.placeholder.com/100x100" alt="300*40">
<img src="http://via.placeholder.com/100x80" alt="300*100">
<img src="http://via.placeholder.com/100x150" alt="300*100">
<img src="http://via.placeholder.com/100x140" alt="300*100">
<img src="http://via.placeholder.com/100x120" alt="300*100">
<img src="http://via.placeholder.com/100x110" alt="300*100">
<img src="http://via.placeholder.com/100x160" alt="300*100">
<img src="http://via.placeholder.com/100x30" alt="300*100">
<img src="http://via.placeholder.com/100x50" alt="300*100">
<img src="http://via.placeholder.com/100x90" alt="300*100">
<img src="http://via.placeholder.com/100x20" alt="300*100">
<img src="http://via.placeholder.com/100x60" alt="300*100">
<img src="http://via.placeholder.com/100x120" alt="300*100">
<img src="http://via.placeholder.com/100x150" alt="300*100">
<img src="http://via.placeholder.com/100x180" alt="300*100">
<img src="http://via.placeholder.com/100x200" alt="300*100">
<img src="http://via.placeholder.com/100x125" alt="300*100">
<img src="http://via.placeholder.com/100x70" alt="300*100">
<img src="http://via.placeholder.com/100x120" alt="300*100">
<img src="http://via.placeholder.com/100x40" alt="300*100">
<img src="http://via.placeholder.com/100x20" alt="300*100">
<img src="http://via.placeholder.com/100x10" alt="300*100">
<img src="http://via.placeholder.com/100x140" alt="300*100">
</div>
<script>
CSS
.waterfall {
max-width: 600px;
margin: 0 auto;
position: relative;
}
.waterfall img {
width: 100px;
margin: 10px;
position: absolute;
transition: all .4s;
}
JS
<script>
var colCount // 列數
var colHeightArray = [] //列高度的空數組
var imgWidth = $('.waterfall img').outerWidth(true)
//outerWidth(true) 表示元素所占用的全部的大小 左右邊距等
colCount = Math.floor($('.waterfall').width()/imgWidth)
console.log(colCount)
for(var i=0;i<colCount;i++) {
colHeightArray[i] = 0
} // 數組初始化為0
$('.waterfall img').on('load',function() {
var minValue = colHeightArray[0]
var minIndex = 0
for(var i=0;i<colCount;i++) {
if(colHeightArray[i]<minValue) {
minValue = colHeightArray[i]
minIndex = i
}
}
$(this).css({
left: minIndex * imgWidth,
top: minValue
})
colHeightArray[minIndex]+=$(this).outerHeight(true)
})
$(window).on('resize',function() {
//jQuery 事件 - resize() 方法
//對瀏覽器窗口調整大小進行計數
colHeightArray = []
colCount = Math.floor($('.waterfall').width()/imgWidth)
for(var i=0;i<colCount;i++) {
colHeightArray[i] = 0
} // 數組初始化為0
$('.waterfall img').each(function() {
var minValue = colHeightArray[0]
var minIndex = 0
for(var i=0;i<colCount;i++) {
if(colHeightArray[i]<minValue) {
minValue = colHeightArray[i]
minIndex = i
}
}
$(this).css({
left: minIndex * imgWidth,
top: minValue
})
colHeightArray[minIndex]+=$(this).outerHeight(true)
})
})
</script>
效果展示:
點擊查看效果
解析：
var colCount // 列數
var colHeightArray = [] //列高度的空數組
colCount = Math.floor(($('.waterfall').width()/$('.waterfall img').outerWidth(true)))
//outerWidth outerWidth() 方法返回第一個匹配元素的外部寬度。該方法包含 padding 和 border。提示：如需包含 margin，請使用 outerWidth(true)
//通過```.waterfall```div的寬度除于圖片的寬度，來獲取列數
console.log(colCount) // 在控制臺輸出一下列數
for(var i=0;i<colCount;i++) {
colHeightArray[i] = 0 // 數組初始化為0
}
//通過循環來初始化我們用于存儲每列高度的數組
// 如果有4列，那么數組的值為 [0,0,0,0]
$('.waterfall img').on('load',function() {
//當圖片加載完成后我們在對其進行排序
var minValue = colHeightArray[0] // 設一個變量來接收圖片的高度
var minIndex = 0 // 設置變量來接收圖片的下標
for(var i=0;i<colCount;i++) {
if(colHeightArray[i]<minValue) { //
minValue = colHeightArray[i]
minIndex = i
}
//通過if判斷來對數組里面的高度進行排序，minIndex數組的下標把最小的圖片放到相應的位置上
}
console.log(colHeightArray)//可以清楚的看到數組的變化，if判斷不斷數組中的最小值
// 對圖片進行擺放
$(this).css({
left: minIndex * imgWidth, // 圖片的left為數組的下標乘于圖片的寬度
top: minValue // 高度就是最小值圖片的高度
})
colHeightArray[minIndex]+=$(this).outerHeight(true) // 數組中最小值等于當前最小值圖片的高度
})
