关于column-count多列布局内容被切割在下列的解决方法以及瀑布流实现方式

问题：这部分的内容应该是第二列的，但是跑到第三列去了，陷入不合理的！

分析：为什么会出现这样的原因？应该是它的计算原理：将所有容器的高度求和，然后再除以列数，得出每列显示的内容高度。

解决方法：指定每个容器只能完整的显示，不分裂：

  -webkit-column-break-inside: avoid;

注意：该代码写在每个容器中，而不是放在column-count的容器中，并且记得遍历的容器不需要给宽的，如果给了宽，break-inside: avoid;会不生效的！！！

最终效果：

瀑布流实现方式

之前写了很多瀑布流的布局，但是都是去找的，慢慢调而实现的效果，最近空闲，所以想总结一下瀑布流的实现方式！

大致有三种实现方式：

css3的column属性实现
如上面的column-count问题：

.listContent {
    column-count: 4;
    -webkit-column-count: 4;
    -o-column-count: 4;
    -ms-column-count: 4;
    -moz-column-count: 4;

    column-gap: 1px;
    -webkit-column-gap: 1px;
    -o-column-gap: 1px;
    -ms-column-gap: 1px;
    -moz-column-gap: 1px;
}
.listContent li {
    width: 4.98rem;
}
#videoList .listContent li{
    padding-bottom: 0.06666667rem;
    margin: 0;
    background: #e8e8e8;
}

<div class="bottomVideoList clearfix">                  
    <ul class="listContent clearfix"></ul>
</div>

注意

在列表的父元素设置，列数column-count；在子元素li中设置宽度它应该有默认的缝隙，对于移动端来说有点大，然后就需要自己设置列之间的缝隙column-gap值还有个问题是，子元素li不能设置margin，会影响计算，只能设置padding

jquery，对高做数组处理的定位型方式
先渲染数据，再对子元素进行定位

/*HTML*/
<div id="main">
    <div class="pin">
        <div class="box">
            <img src="./images/1.jpg"/>
        </div>
    </div>
</div>

/* js */
//首先加载数据，并渲染上去
$.each( dataInt.data, function( index, value ){
    var $oPin = $('<div>').addClass('pin').appendTo( $( "#main" ) );
    var $oBox = $('<div>').addClass('box').appendTo( $oPin );
    $('<img>').attr('src','./images/' + $( value).attr( 'src') ).appendTo($oBox);
});
//再进行样式的修整
waterfall();

function waterfall(parent,pin){
    var $aPin = $( "#main>div" );
    var iPinW = $aPin.eq( 0 ).width();// 一个块框pin的宽
    var num = Math.floor( $( window ).width() / iPinW );//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
    //设置父级居中样式：定宽+自动水平外边距
    $( "#main" ).css({
        'width:' : iPinW * num,
        'margin': '0 auto'
    });

    var pinHArr=[];//用于存储 每列中的所有块框相加的高度。

    $aPin.each( function( index, value ){
        var pinH = $aPin.eq( index ).height();
        if( index < num ){
            pinHArr[ index ] = pinH; //第一行中的num个块框pin 先添加进数组pinHArr
        }else{
            var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH
            var minHIndex = $.inArray( minH, pinHArr );
            $( value ).css({
                'position': 'absolute',
                'top': minH + 15,
                'left': $aPin.eq( minHIndex ).position().left
            });
            //数组 最小高元素的高 + 添加上的aPin[i]块框高
            pinHArr[ minHIndex ] += $aPin.eq( index ).height() + 15;//更新添加了块框后的列高
        }
    });
}

js，对高做数组处理的定位型方式
原理与jquery一样，先渲染数据，再对子元素进行定位

var oParent = document.getElementById('main');// 父级对象
for(var i=0;i<dataInt.data.length;i++){
    var oPin=document.createElement('div'); //添加 元素节点
    oPin.className='pin';                   //添加 类名 name属性
    oParent.appendChild(oPin);              //添加 子节点
    var oBox=document.createElement('div');
    oBox.className='box';
    oPin.appendChild(oBox);
    var oImg=document.createElement('img');
    oImg.src='./images/'+dataInt.data[i].src;
    oBox.appendChild(oImg);
}
waterfall('main','pin');


function waterfall(parent,pin){
    var oParent=document.getElementById(parent);// 父级对象
    var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin
    var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽
    var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
    oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式：定宽+自动水平外边距

    var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
    for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素
        var pinH=aPin[i].offsetHeight;
        if(i<num){
            pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr
        }else{
            var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH
            var minHIndex=getminHIndex(pinHArr,minH);
            aPin[i].style.position='absolute';//设置绝对位移
            aPin[i].style.top=minH+'px';
            aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';
            //数组 最小高元素的高 + 添加上的aPin[i]块框高
            pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高
        }
    }
}

function getminHIndex(arr,minH){
    for(var i in arr){
        if(arr[i]==minH){
            return i;
        }
    }
}