2018-7-4 seo達人
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
html與css:
<!DOCTYPE html>
</html>
JS:
var waterfall = function(wrap, boxes) {
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 標簽重定義 */
* {
margin: 0;
padding: 0;
border: none;
}
body {
background: #ddd;
}
img {
border: none;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #999;
}
/* wrap */
#wrap {
position: relative;
width: auto;
height: auto;
margin: 0 auto;
}
#wrap>div {
float: left;
box-sizing: border-box;
width: 280px;
height: auto;
margin: 10px;
padding: 10px;
border-radius: 5px;
background: #fff;
}
#wrap>div>img {
width: 260px;
margin: 0 auto;
}
#wrap>div>a {
display: block;
font-size: 18px;
font-weight: bold;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div>
<img src="img/1.jpg">
<a target="_blank">第一張 路飛與艾斯</a>
</div>
<div>
<img src="img/2.jpg">
<a target="_blank">第二張 艾博</a>
</div>
<div>
<img src="img/3.jpg">
<a target="_blank">第三張 路飛</a>
</div>
<div>
<img src="img/4.jpg">
<a target="_blank">第四張 艾斯</a>
</div>
<div>
<img src="img/5.jpg">
<a target="_blank">第五張 女王</a>
</div>
<div>
<img src="img/6.jpg">
<a target="_blank">第六張 香吉士</a>
</div>
<div>
<img src="img/7.jpg">
<a target="_blank">第七張 艾斯</a>
</div>
<div>
<img src="img/8.jpg">
<a target="_blank">第八張 霸氣</a>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
// 獲取屏幕可以顯示的列數
var boxWidth = boxes.eq(0).width() + 40;
var windowWidth = $(window).width();
var colsNumber = Math.floor(windowWidth / boxWidth);
// 設置容器的寬度
wrap.width(boxWidth * colsNumber);
// 定義一個數組并存儲每一列的高度
var everyHeight = new Array();
for (var i = 0; i < boxes.length; i++) {
if (i < colsNumber) {
everyHeight[i] = boxes.eq(i).height() + 40;
} else {
var minHeight = Math.min.apply(null, everyHeight);
var minIndex = getIndex(minHeight, everyHeight);
boxes.eq(i).css({
'position': 'absolute',
'top': minHeight,
'left': boxes.eq(minIndex).position().left,
'opacity': '0'
}).stop().animate({
'opacity': '1'
}, 1000);
everyHeight[minIndex] += boxes.eq(i).height() + 40;
};
}
};
// 獲取最小列的索引
function getIndex(minHeight, everyHeight) {
for (index in everyHeight) {
if (everyHeight[index] == minHeight) {
return index;
};
};
};
$(document).ready(function(event) {
var wrap = $('#wrap');
var boxes = $('#wrap').children('div');
waterfall(wrap, boxes);
});