water of columns

created By jimmy

by THR jimmy

HTML

<div id="container">
            <span class="column">
                <article class="panel">
                    <img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" alt=""/>
                    <p>titile</p>
                </article>
                <article class="panel">
                    <img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" alt=""/>
                    <p>titile</p>
                </article>
                <article class="panel">
                    <img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" alt=""/>
                    <p>titile</p>
                </article>
                <article class="panel">
                    <img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" alt=""/>
                    <p>titile</p>
                </article>
                <article class="panel">
                    <img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" alt=""/>
                    <p>titile</p>
                </article>
                <article class="panel">
                    <img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" alt=""/>
                    <p>titile</p>
                </article>
                <article class="panel">
                    <img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" alt=""/>
                    <p>titile</p>
                </article>
            </span>
           <span class="column">
                <article class="panel">
                    <img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" alt=""/>
                    <p>titile</p>
                </article>
                <article class="panel">
                    <img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" alt=""/>
                    <p>titile</p>
                </article>
                <article class="panel">
                    <img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" alt=""/>
                    <p>titile</p>
               ...

SCSS

$font:10px/1.5 sans-serif,"Microsoft YaHei","Arial";
html,body{
	height: 100%;
	width: 100%;
	font:$font;
    background-color: #eee;
}
#container{
    width:100%;
    height: 100%;
    position: relative;
    text-align: center;
}
.column{
    display: inline-block;
    width:210px;
    vertical-align: top;
    padding:0 10px;
    .panel{
        padding: 10px 0 10px 0;
        display: block;
        text-align: center;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        background-color: #fff;
        text-decoration: none;
    }
}

Babel + JSX

var $ = function() {
    return document.querySelectorAll.apply(document, arguments);
}
var tpl = {
        temp(src) {
            return `
                    <img src="http://cued.xunlei.com/demos/publ/img/P_00${src}" alt=""/>
                    <p>titile</p>
                </article>

    `;
        }
    }
    //#container .column
var waterFall = (function() {
    //初始化布局
    var arrHeight = []; //列的高度
    var columns = function() { //计算页面最多可以放多少列
            var bodyW = $('#container')[0].clientWidth,
                pinW = $(".column")[0].offsetWidth;
            return Math.floor(bodyW / pinW);
        }
        //设置瀑布流居中
    var getHtml = function() {
            var cols = $('.column'), //获得已有的列数
                arrHtml = [];
            for (var i = 0, col; col = cols[i++];) {
                var htmls = col.innerHTML.match(/<img(?:.|\n|\r|\s)*?p>/gi); //获取一个columns的
                arrHtml = arrHtml.concat(htmls);
            }
            return arrHtml;
        }
        //获得数组中最低的高度
    var getMinIndex = function() { //获得最小高度的index
        var minHeight = Math.min.apply(null, arrHeight); //获得最小高度
        for (var i in arrHeight) {
            if (arrHeight[i] === minHeight) {
                return i;
            }
        }
    }
    var createCol = function() {
            var cols = columns(), //获得列数
                contain = $("#container")[0];
            contain.innerHTML = ''; //清空数据
            for (var i = 0; i < cols; i++) {
                var span = document.createElement("span");
                span.className = "column";
                contain.appendChild(span);
            }
        }
        //初始化列的高度
    var initHeight = function() {
            var cols = columns(),
            	arr = [];
            for (var i = 0; i < cols; i++) {
            	arr.push(0);
            }
            arrHeight = arr;
        }
     //创建一个ele并且添加到最小位置
    var createArticle = function(html){
    	var cols = $('.column'),
    		index =...