关于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>

注意

1. 在列表的父元素设置，列数column-count；在子元素li中设置宽度
2. 它应该有默认的缝隙，对于移动端来说有点大，然后就需要自己设置列之间的缝隙column-gap值
3. 还有个问题是，子元素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; }    }}