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;

}