java瀑布流_原生JS实现瀑布流效果

【前言】

近期开始讲到高阶JS，为了提高学习兴趣，再讲点特效。本次简单总结下JS实现瀑布流特效

样式特点：

(1)呈现出等宽不等高，参差不齐排列

(2)拖动滚动条时会不断加载新数据，甚至可以无限往下拖动，一直拖一直加载新数据

实现方案：

①原生JS；②jQuery库；③CSS3的多栏布局

【主体】

直接上代码，具体意思里面有注释，注意文件位置

JS

/*代码初始化*/

*{

margin: 0;

padding: 0;

}

/*代码主体*/

#main{

position: relative;

margin: 0 auto;

}

/*砖头缝隙*/

.box{

padding: 15px 0 0 15px;

float: left;

}

/*盒子样式*/

.pic{

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

box-shadow: 0 0 5px #ccc;

}

.pic img{

width: 165px;

height: auto;

}

var dataList = {

"data":[

{"src":"01.jpg"},

{"src":"02.jpg"},

{"src":"03.jpg"},

{"src":"04.jpg"},

{"src":"05.jpg"},

{"src":"06.jpg"},

{"src":"07.jpg"},

{"src":"08.jpg"}

]

}

window.onload = function(){

waterFall();

window.onscroll = function(){

change();

}

}

function waterFall(){

//1、获取box盒子

var main = document.getElementById("main");

var box = main.getElementsByClassName("box");

//2、计算列数(页面宽/box宽)

var boxWidth = box[0].offsetWidth;//盒子宽度

var docWidth = document.documentElement.clientWidth;//页面宽度

var cols = Math.floor(docWidth/boxWidth);

// 3、设置main宽度

main.style.width = boxWidth*cols+"px";

// 4、对比高度

var boxArray = [];//存放每一列高度

for(var i=0;i

if(i

boxArray.push(box[i].offsetHeight);

}else{

// 5、计算最矮高度

var minH = Math.min.apply(null,boxArray);//最矮高度

var MinHindex = boxArray.indexOf(minH);

//6、设置下一行图片位置

box[i].style.position = "absolute";

box[i].style.top = minH + "px";

//左侧计算boxbox[i].style.left = boxWidth*MinHindex + "px";

box[i].style.left = box[MinHindex].offsetLeft + "px";

// 7、添加完后，将其高度做改变

boxArray[MinHindex] += box[i].offsetHeight;

}

}

}

//检测是否具备记载条件

function change(){

//判断是否具备加载条件

//1、获取box盒子

var main = document.getElementById("main");

var box = main.getElementsByClassName("box");

// 2、获取最后一个块距离父级元素main的顶部距离

var lastBoxH = box[box.length-1].offsetTop;

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

var height = document.body.clientHeight || document.documentElement.clientHeight;

if(scrollTop+height>lastBoxH){

//将数据块放到页面里

// (1)遍历数据

for(var i=0;i

// (2)创建元素节点

var newBox = document.createElement("div");

// newBox.setAttribute("class","box");

newBox.className = "box animated slideInUp";

main.appendChild(newBox);

var newPic = document.createElement("div");

newPic.className = "pic";

newBox.appendChild(newPic);

var newImg = document.createElement("img");

newImg.src = "img/"+dataList.data[i].src;

newPic.appendChild(newImg);

}

//新增后再次瀑布流

waterFall();

}

}

.