瀑布流的使用

　　瀑布流在前端中是比较重要的一部分,瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

国内大多数清新站基本为这类风格。

　　以下是瀑布流代码,提供给大家借鉴

<!DOCTYPE html>

<html>

<head>

*{padding: 0;margin: 0;}

#list{position: relative;list-style: none;}

#list img{position: absolute;transition: all 0.5s linear;}

</style>

</head>

<body>

</ul>

</body>

</html>

//先给图片做预加载

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

　　以上代码为个人所写,可以借鉴.欢迎大家提出建议.

瀑布流的使用

推荐阅读