<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>瀑布流原始寫法</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
.content {
position: relative;
}
.item {
position: absolute;
width: 200px;
margin-right: 10px;
margin-top: 10px;
transition: all 1s;
}
.h1 {
height: 200px;
background-color: #f4b300;
}
.h2 {
height: 300px;
background-color: #691BB8;
}
.h3 {
height: 400px;
background-color: #006ac1;
}
</style>
</head>
<body>
<div class="content">
<div class="item h1">1</div>
<div class="item h3">2</div>
<div class="item h2">3</div>
<div class="item h1">4</div>
<div class="item h1">5</div>
<div class="item h3">6</div>
<div class="item h3">7</div>
<div class="item h2">8</div>
<div class="item h1">9</div>
<div class="item h3">10</div>
<div class="item h3">11</div>
<div class="item h2">12</div>
<div class="item h2">13</div>
<div class="item h2">14</div>
</div>
<script>
function render(){
var nodeWidth = $('.item').outerWidth(true), //節(jié)點的寬度。.outerWidth(true)包含外邊距和邊框的寬度
colNum = parseInt($(window).width() / nodeWidth), //計算當前有幾列殉农。parseInt()方法取整數
colSumHeight = []; //定義一個空數組册倒，用于計算列的高度之和
for(var i=0; i<colNum; i++){
colSumHeight.push(0); //定義初始高度0寞蚌。.push()在數組的末尾添加數值0
}
$('.item').each(function(){
var $cur = $(this);
//colSumHeight = [100, 250, 80, 200] 假設目前一行元素的高度
//聲明下標第0位,聲明minSumHeight的最小高度是0
var idx = 0,
minSumHeight = colSumHeight[0];
for(var i=0; i<colSumHeight.length; i++){
//用于替換下標和最小高度
if(colSumHeight[i] < minSumHeight){
var idx = i,
minSumHeight = colSumHeight[i];
}
}
//調整替換過的.item的位置
$cur.css({
left: nodeWidth*idx,
top: minSumHeight
});
//疊加后的高度=當前元素的高度+相加前的高度
colSumHeight[idx] = $cur.outerHeight(true) + colSumHeight[idx];
});
}
render();
$(window).on('resize', function(){
render();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>瀑布流封裝寫法一</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
.content {
position: relative;
}
.item {
position: absolute;
width: 200px;
margin-right: 10px;
margin-top: 10px;
transition: all 1s;
}
.h1 {
height: 200px;
background-color: #f4b300;
}
.h2 {
height: 300px;
background-color: #691BB8;
}
.h3 {
height: 400px;
background-color: #006ac1;
}
</style>
</head>
<body>
<div class="content">
<div class="item h1">1</div>
<div class="item h3">2</div>
<div class="item h2">3</div>
<div class="item h1">4</div>
<div class="item h1">5</div>
<div class="item h3">6</div>
<div class="item h3">7</div>
<div class="item h2">8</div>
<div class="item h1">9</div>
<div class="item h3">10</div>
<div class="item h3">11</div>
<div class="item h2">12</div>
<div class="item h2">13</div>
<div class="item h2">14</div>
</div>
<script>
var water = (function () {
function render() {
var nodeWidth = $('.item').outerWidth(true), //節(jié)點的寬度倒源。.outerWidth(true)包含外邊距和邊框的寬度
colNum = parseInt($(window).width() / nodeWidth), //計算當前有幾列。parseInt()方法取整數
colSumHeight = []; //定義一個空數組酱塔，用于計算列的高度之和
for (var i = 0; i < colNum; i++) {
colSumHeight.push(0); //定義初始高度0（即第一列每個元素的初始高度都是0）绳矩。.push()在數組的末尾添加數值0
}
$('.item').each(function () {
var $cur = $(this);
//colSumHeight = [100, 250, 80, 200] 假設目前一行元素的高度
//聲明下標第0位,聲明minSumHeight的最小高度是0
var idx = 0,
minSumHeight = colSumHeight[0];
for (var i = 0; i < colSumHeight.length; i++) {
//用于替換下標和最小高度
if (colSumHeight[i] < minSumHeight) {
var idx = i,
minSumHeight = colSumHeight[i];
}
}
//調整替換過的.item的位置
$cur.css({
left: nodeWidth * idx,
top: minSumHeight
});
//疊加后的高度=當前元素的高度+相加前的高度
colSumHeight[idx] = $cur.outerHeight(true) + colSumHeight[idx];
});
}
render();
$(window).on('resize', function () {
render();
});
/*render函數放在了要return出去的對象water的init屬性里(retrun出一個接口)
water.init = water[init] = render
如果直接寫成init: render(),那init就是render函數執(zhí)行之后的結果
render函數執(zhí)行的返回值是undefined，所以init: undefined*/
return {
init: render
}
})();
console.log(water);
water.init();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>瀑布流封裝寫法二</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
.content {
position: relative;
}
.item {
position: absolute;
width: 200px;
margin-right: 10px;
margin-top: 10px;
transition: all 1s;
}
.h1 {
height: 200px;
background-color: #f4b300;
}
.h2 {
height: 300px;
background-color: #691BB8;
}
.h3 {
height: 400px;
background-color: #006ac1;
}
</style>
</head>
<body>
<div class="content">
<div class="item h1">1</div>
<div class="item h3">2</div>
<div class="item h2">3</div>
<div class="item h1">4</div>
<div class="item h1">5</div>
<div class="item h3">6</div>
<div class="item h3">7</div>
<div class="item h2">8</div>
<div class="item h1">9</div>
<div class="item h3">10</div>
<div class="item h3">11</div>
<div class="item h2">12</div>
<div class="item h2">13</div>
<div class="item h2">14</div>
</div>
<script>
//定義一個對象
var WaterFall = {
//高度[0, 0, 0, 0]
//高度[20, 10, 30, 15]
arrColHeight: [],
init: function($ct){
this.$ct = $ct;
}
}
//調用時傳入根節(jié)點
WaterFall.init($('.content'));
</script>
</body>
</html>
