瀑布流在前端中是比较重要的一部分,瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
国内大多数清新站基本为这类风格。
以下是瀑布流代码,提供给大家借鉴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
#list{position: relative;list-style: none;}
#list img{position: absolute;transition: all 0.5s linear;}
</style>
</head>
<body>
<ul id="list">
</ul>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//先给图片做预加载
var WIDTH = 300;
var imgArray = [];//主要用来放置加载好的图片
function preloadImg(){
for (var i = 1; i< 40;i++) {
var aImg = $("<img>").attr("src","img/"+i+".jpg")
aImg.on("load",function(){
imgArray.push(this);
if (imgArray.length == 39) {
//加载完毕
createLi();
resizeFun();
}
})
}
}
preloadImg();
function createLi(){
for (var i = 0;i < 39;i++) {
//计算可以放置多少列
var numCol =parseInt(document.documentElement.clientWidth / (WIDTH + 10))
var topArray = [];
//初始化记录高度值的数组 topArray
for (var i = 0;i < numCol;i++) {
topArray[i] = 0;
}
for (var i = 0; i < 39;i++) {
var aImg = imgArray[i];
aImg.style.width = WIDTH +"px";
//找到放到那一列,找高度最小的那一列
var minIndex = 0;
var min = topArray[0];
for (var j = 0;j < topArray.length;j++) {
if (min > topArray[j]) {
min = topArray[j];
minIndex = j;
}
}
aImg.style.left = minIndex * (WIDTH + 10) + 10 + "px";
aImg.style.top = min + 10 + "px";
$("#list").append($(aImg));
topArray[minIndex] += (aImg.offsetHeight + 10);
}
}
}
function resizeFun(){
window.onresize = function(){
createLi();
}
}
resizeFun();
</script>
以上代码用到的img图片 均以 数字 + .jpg 格式命名 例如:1.jpg
以上代码为个人所写,可以借鉴.欢迎大家提出建议.