js 原生 瀑布流布局，瀑布流布局

HTML代码

css代码

*{
    margin: 0;
    padding: 0;
}
#main{
    position: relative;
}
.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: 180px;
    height: auto;
}

js代码

window.onload = function () {
    waterfall("main", "box");
    var dataInt = {
        "data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"},{"src":"12.jpg"},{"src":"13.jpg"},{"src":"14.jpg"},{"src":"15.jpg"},{"src":"16.jpg"}]
    };
    window.onscroll = function(){
        if(checkScrollSlide){
            var oParent = document.getElementById('main');
            for(var i=0;i

 

。。。。。。。。。。。。。。。分割线。。。。。。。。。。。。。。。。。。。。。。。。。

有一种简单的css3布局的方法，基本实现需求

html代码

css代码

.container{
    -webkit-column-width:160px;
    -moz-column-width:160px; 
	  -webkit-column-gap:5px;
	  -moz-column-gap:5px;
}


/*数据块 砖块*/

.container div{width:160px;
               margin:4px 0;}