// 添加插件
$.fn.extend({
waterfall:function(){
// console.log('我自己寫的瀑布流插件');
// 步驟1
/*
為了 計(jì)算 獲取一些 必須知道的值
容器的寬度 .items的 寬度
子元素的寬度 .child().width()
每一行放置的元素個(gè)數(shù)
計(jì)算間距
*/
// 定義$_變量 方便 觀察
var? $_this = this;
// 父盒子寬度
var totalWidth =$_this.width();
// 子元素寬度
var itemWidth = $_this.children('.item').width();
// 每一行的個(gè)數(shù) 4.1? 4.9
var colNum =Math.floor(totalWidth / itemWidth);
// 間距 (總寬度 - 個(gè)數(shù)*子元素寬度)/(個(gè)數(shù)-1)
var margin = (totalWidth - itemWidth*colNum)/(colNum-1);
// 步驟2
/* 1. 準(zhǔn)備一個(gè) 數(shù)組 數(shù)組元素的個(gè)數(shù) 跟 每一行的個(gè)數(shù)一直
里面是默認(rèn)值(比如是10 或者是margin)
2. 循環(huán)我們的 所有 .item 子元素
獲取子元素的高度
通過我們?cè)诓襟E1中定義的 數(shù)組 獲取 最小的值
根據(jù)獲取的 最小索引值 計(jì)算top 以及l(fā)eft
3.修改步驟1中定義的 數(shù)組 對(duì)應(yīng)索引的值 即可
*/
// 步驟2.1 準(zhǔn)備高度數(shù)組
// 高度數(shù)組
var heightArr = [];
// 循環(huán)為 高度數(shù)組 賦值 初始值
for (var i = 0; i < colNum; i++) {
heightArr[i] = margin;
}
// 步驟 2.2 循環(huán)子元素 獲取數(shù)組中最小的索引
// 修改當(dāng)前循環(huán)的元素的 top 以及 left值
// jq中 循環(huán)數(shù)組的方法
$_this.children('.item').each(function(index, element) {
// console.log(index+'||'+element);
// 獲取 當(dāng)前循環(huán)的 子元素高度
var currentHeight = $(element).height();
// 計(jì)算 該元素 放在哪個(gè)位置
// 先 假設(shè) 索引為0的 是最小值
var minIndex = 0;
var minHeight =heightArr[0];
for (var i = 0; i < heightArr.length; i++) {
// 根 我們自己假設(shè)的 最小值 進(jìn)行比較
if (heightArr[i]<minHeight) {
// 替換一下
minHeight = heightArr[i];
minIndex = i;
}
}
// 循環(huán)完畢 最小的 高度 以及 最小的 索引值
// 設(shè)置給 當(dāng)前循環(huán)的 子元素 即可
// top 高度為 計(jì)算出來的 最小高度
// left 左間距為 寬度*索引 +索引*間距
$(element).css({
top:minHeight,
left:minIndex*itemWidth+minIndex*margin
});
// 步驟2.3 修改 步驟1中 創(chuàng)建的 高度數(shù)組
// 修改 minIndex 對(duì)應(yīng)的值即可
minHeight+=currentHeight; //加上自己的高度
minHeight+=margin;//為了美觀 把間距 加上去
// 賦值給 高度數(shù)組即可
heightArr[minIndex]=minHeight;
});
//步驟3
/*
修改 父盒子的 高度 即可
// 獲取 高度數(shù)組中 最大的值
// 修改父盒子的高度為 計(jì)算出來的 最大值即可
*/
//
var maxHeight = heightArr[0];
for (var i = 0; i < heightArr.length; i++) {
if(heightArr[i]>maxHeight){
// 將 更大的值 保存起來
maxHeight = heightArr[i];
}
}
// 循環(huán)完畢以后 最大值 就有了
$_this.height(maxHeight);
}
})
