jqury实现的横向排序的瀑布流

html代码（li内容自行填充）：

  <div class="content-footer">
        <ul>
            <li>
                
            </li>
             <li>
                
            </li>
		
	<li>
                
            </li>
                    </ul>    </div></div>

css代码：

.content-footer{
    margin: 0 auto;
    width: 1168px;
    position: relative;
}

.content-footer >ul{
    padding: 0;
    position: relative;
    /*!**栏宽**!*/
    /*-webkit-column-width:374px;*/
    /*-moz-column-width:374px;*/
    /*column-width:374px;*/
    /*!**栏间距**!*/
    /*-webkit-column-gap:15px;*/
    /*-moz-column-gap:15px;*/
    /*column-gap:18px;*/
}

.content-footer >ul >li{

    position: relative;
    display: inline-block;
    text-align: left;
    background: #fff;
    width: 374px;
    border-radius: 10px;
    margin-bottom: 15px;
    float: left;
    margin-right: 22px;

}

.content-footer >ul >li:nth-child(3n+0){
    margin-right: 0;
}

js代码：

var footer_li = $('.content-footer >ul >li');
$.each(footer_li,function (index,item) {
   // console.log(index);
    if(index>2){
      // console.log($(footer_li[index-3]).height());
        layout(footer_li,index,item);
    }


})

function getHeight(footer_li,index) {
    var l_height = $(footer_li[index-3]).height();

    if(index-3>2){
        l_height =l_height+ getHeight(footer_li,index-3)+20;
     //   console.log(getHeight(footer_li,index-3));
    }
    return l_height;
}

function getLeft(index) {
    var left;
    if(index%3==0){
        left=0
    }else if(index%3==1){
        left=374+22;
    }else if(index%3==2){
        left=(374+22)*2;
    }
    return left;
}


function layout(footer_li,index,item) {
    var last_height = getHeight(footer_li,index);
    $(item).css({
        'position':'absolute',
        'left':getLeft(index),
        'top':last_height+15,
        'float':'none'
    });
}

转载请注明原文链接