jquery实现简单的瀑布流布局

下面是详细讲解“jQuery实现简单的瀑布流布局”的完整攻略。

什么是瀑布流布局

瀑布流布局，也称为瀑布流式布局、瀑布式布局或瀑布流排版，指的是将内容按照一定的规则排列，形成像瀑布一样的瀑布流效果的网页布局方式。一般用于图片等多媒体内容的展示。

实现瀑布流布局

步骤一：定义html结构

首先定义一个容器，用来存放图片等内容，如下所示：

<div class="container"></div>

步骤二：引入jQuery库

在<head>标签中引入jQuery库，如下所示：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

步骤三：定义CSS样式

为图片和容器定义比较基础的CSS样式，如下所示：

.container {
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}

.box {
  width: 300px;
  float: left;
  margin: 10px;
}

其中，.box是每一个图片容器的类名。

步骤四：使用jQuery实现瀑布流布局

在上述步骤的基础上，使用jQuery实现瀑布流布局。下面是具体实现的代码：

$(window).on('load', function(){
    waterFall();
    var data = {
      "data": [
        {"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"}
      ]
    };
    $(window).on('scroll', function(){
        if(checkScrollSlide){
            $.each(data.data, function(index, value){
                var oBox = $('<div>').addClass('box').appendTo($('.container'));
                var oPic = $('<div>').addClass('pic').appendTo($(oBox));
                $('<img>').attr('src', './img/' + $(value).attr('src')).appendTo($(oPic));
            });
            waterFall();
        }
    });
});
function checkScrollSlide(){
    var lastBox = $('.box').last();
    var lastBoxDis = $(lastBox).offset().top + Math.floor($(lastBox).outerHeight()/2);
    var scrollTop = $(window).scrollTop();
    var documentH = $(window).height();
    return (lastBoxDis<scrollTop+documentH)?true:false;
}
function waterFall(){
    var $boxs = $('.box');
    var w = $boxs.eq(0).outerWidth();
    var cols = Math.floor($(window).width()/w);
    $('.container').width(w*cols).css('margin', '0 auto');
    var hArr = [];
    $boxs.each(function(index, value){
        var h = $boxs.eq(index).outerHeight();
        if(index < cols){
            hArr[index] = h;
        }else{
            var minH = Math.min.apply(null, hArr);
            var minHIndex = $.inArray(minH, hArr);
            $(value).css({
                'position': 'absolute',
                'top': minH+'px',
                'left': minHIndex*w+'px'
            });
            hArr[minHIndex] += $boxs.eq(index).outerHeight();
        }
    });
}

完整的代码可以参见 GitHub。

示例一

为了更好地理解上述代码，下面给出示例一：

// 定义数据对象
var data = {
  "data": [
    {"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"}
  ]
};

// 定义滚动事件
$(window).on('scroll', function(){
    if(checkScrollSlide()){
        $.each(data.data, function(index, value){
            // 创建图片容器
            var oBox = $('<div>').addClass('box').appendTo($('.container'));
            // 创建图片
            var oPic = $('<div>').addClass('pic').appendTo($(oBox));
            $('<img>').attr('src', './img/' + $(value).attr('src')).appendTo($(oPic));
        });
        waterFall();
    }
});

上述代码中，定义了一个数据对象data，包含了14张图片的url。在滚动事件中，根据滚动事件是否到达页面底部，决定是否创建图片容器和图片元素。

示例二

为了更好地理解上述代码，下面给出示例二：

// 定义waterFall函数
function waterFall(){
    // 获取图片容器
    var $boxs = $('.box');
    // 获取容器宽度
    var w = $boxs.eq(0).outerWidth();
    // 获取列数
    var cols = Math.floor($(window).width()/w);
    // 设置容器宽度并居中
    $('.container').width(w*cols).css('margin', '0 auto');
    // 定义一个数组，用于保存每一列的高度
    var hArr = [];
    $boxs.each(function(index, value){
        // 获取图片高度
        var h = $boxs.eq(index).outerHeight();
        // 判断是否是第一行
        if(index < cols){
            hArr[index] = h;
        }else{
            // 获取最小高度
            var minH = Math.min.apply(null, hArr);
            // 获取最小高度的列
            var minHIndex = $.inArray(minH, hArr);
            // 设置位置
            $(value).css({
                'position': 'absolute',
                'top': minH+'px',
                'left': minHIndex*w+'px'
            });
            // 更新高度
            hArr[minHIndex] += $boxs.eq(index).outerHeight();
        }
    });
}

上述代码中，定义了一个名为waterFall的函数，用于实现瀑布流布局。在此函数中，首先获取图片容器的高度、每一个容器的宽度、每一行容器的列数，并将容器居中。接着，定义一个数组用于保存每一列的高度，并遍历每一个容器，获取其高度和所在列的位置，最后更新每一列的高度。

总结

通过上述实现瀑布流布局的步骤和示例，我们可以发现，使用jQuery实现瀑布流布局的主要步骤有：定义html结构、引入jQuery库、定义CSS样式和使用jQuery实现瀑布流布局。可以通过数据对象和遍历实现动态加载，并通过waterFall函数实现瀑布流布局效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现简单的瀑布流布局 - Python技术站