简单实现瀑布流布局

效果图和文档结构

<style>

.waterfull {

    width: 1250px;
    margin: 20px auto auto auto;
}
.relative {
    position: relative;
}

.waterfull li {
    position: absolute;
    width: 250px;
    padding-bottom: 10px;
}
.waterfull ul, .waterfull li {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.waterfull li .item {
    width: 220px;
    margin: auto;
    box-shadow: 0px 1px 2px #bbb;
    background-color: #ffffff;
    white-space: normal;
    word-break: break-all;
    border: 1px solid #ddd;
    line-height: 24px;
}

</style>

<script>

  function waterfull() {
    var doc_w = document.getElementById('waterfull').offsetWidth; // 获取宽度
    var lis = document.getElementsByClassName('waterli'); // 获取页面中定位元素集合
    var li_w = lis[0].offsetWidth; // 获取页面中定位元素的宽度
    var n = Math.floor(doc_w / li_w); // 计算出每一行放置定位元素的个数
    var h = []; // 定义一个数组用来实时记录每列的高度
    for (var i = 0; i < lis.length; i++) {
        var li_h = lis[i].offsetHeight; // 每个定位元素的高度值
        if (i < n) { // 第一行top值都等于0; left 等于定位元素的下标乘以定宽
            lis[i].style.top = 0;
            lis[i].style.left = i * li_w + 'px';
            h[i] = li_h;
        } else if (i > n) {
            h[i] = li_h;
            lis[i].style.left = (i % n) * li_w + 'px';
            lis[i].style.top = h[i - n] + parseInt(lis[i - n].style.top) + 'px';
        } else if (i = n) {
            h[i] = li_h;
            lis[i].style.left = (i % n) * li_w + 'px';
            lis[i].style.top = h[i - n] + parseInt(lis[i - n].style.top) + 'px';
        }
    }
}

</script>