实现瀑布流布局的几种方法

最新推荐文章于 2024-08-01 15:19:04 发布

alisaLearn

最新推荐文章于 2024-08-01 15:19:04 发布

阅读量2.3k

点赞数 3

分类专栏：原生JS JQuery 布局文章标签：瀑布流布局布局 javascript JQuery

本文链接：https://blog.csdn.net/alisalearn/article/details/52652780

版权

原生JS 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

JQuery

4 篇文章 0 订阅

订阅专栏

布局

2 篇文章 0 订阅

订阅专栏

本文分别用原生JS与JQ框架写出瀑布流布局的方法
首先引库：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>我的瀑布布局</title>
  <!--<script src="js/waterfall-jx.js"></script>-->
  <script src="js/ku/jquery.min.js"></script>
  <script src="js/ku/jquery-2.1.4.min.js"></script>
  <script src="js/waterfall-jq.js"></script>
  <link href="css/waterfall-jx.css" rel="stylesheet">
</head>

<body>
  <div id="main">
  </div>
</body>

</html>

CSS:

*{padding:0px;margin:0px;}
#main{
    position: relative;
}
.pad{
    padding:15px 0 0 15px;
    float:left;
}
.pic{
    padding:5px;
    border:1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
}
.pic img{
    width:190px;
    height: auto;
}

JavaScript代码：

window.onload = function () {
    waterfall('main', 'pad');
}

function waterfall(parent, box) {
    var oparent = document.getElementById(parent);
    var obox = getClass(oparent, box);
    var colWidth = obox[0].offsetWidth;
    var cols = Math.floor(document.documentElement.clientWidth / colWidth);
    oparent.style.cssText = 'width:' + cols * colWidth + 'px;margin:0 auto';
    var colHeight = new Array();
    for (var i = 0; i < obox.length; i++) {
        if (i < cols) {
            colHeight.push(obox[i].offsetHeight);
        }
        else {
            var colMin = Math.min.apply(null, colHeight);
            var index = getMinIndex(colHeight, colMin);
            obox[i].style.position = 'absolute';
            obox[i].style.top = colMin + 'px';
            obox[i].style.left = index*colWidth+'px';
            colHeight[index]+=obox[i].offsetHeight;
        }
    }

}
//得到所有class为clsName的parent子项目
function getClass(parent, clsName) {
    var boxarr = new Array(),
        child = parent.getElementsByTagName('*');
    for (var i = 0; i < child.length; i++) {
        if (child[i].className == clsName)
            boxarr.push(child[i]);
    }
    return boxarr;
}

//获得最小高度值box的index
function getMinIndex(h,min) {
    for (var i in h) {
        if (h[i] == min) {
            return i;
        }
    }
}

以下为JQuery方法的实现：

$(function(){
    var json = {"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},
                        {"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},
                        {"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},
                        {"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"},
                        {"src":"12.jpg"},{"src":"13.jpg"},{"src":"14.jpg"},
                        {"src":"15.jpg"}]};
    $.each(json.data,function(i,value){
        var aPad = $("<div>").addClass("pad").appendTo($("#main"));
        var aPic = $("<div>").addClass("pic").appendTo($(aPad));
        $("<img />").attr('src','images/'+$(value).attr('src')).appendTo($(aPic));
    });
});

window.onload = function () {

    //获得列数
    var pW = $(window).width();
    var boxW = $(".pad").outerWidth();
    var num = Math.floor(pW/boxW);

    //获取第一行高度
    var lh = [];
    $(".pad").each(function(i,value){
        if(i<num)
        lh[i] = $(this).outerHeight();
        //操作第2+行
        else{
            var min = Math.min.apply(null,lh);
            var minIndex = $.inArray(min,lh);
            $(this).css({
                'position' : 'absolute',
                'top' : min + 'px' ,
                'left': minIndex*boxW + 'px',
            });
            lh[minIndex] = $(this).outerHeight()+min;
        }
    });

}