jQuery实现瀑布流

程序员文章站 2022-07-12 15:20:46

...

知识点

瀑布流原理：外层一个大的div，里面的小div相对父盒子进行绝对定位。第一行定位完成后，第二行第一个接在第一行高度最矮的一个下面，以此类推。
eq(N)获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。
jQuery.inArray() 确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。
$(’
’)新建元素
appendTo()把所有匹配的元素追加到另一个指定的元素元素集合中。

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流效果</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
 <!--父盒子-->
 <div id="main">
     <!--子盒子-->
     <div class="box">
         <div class="pic">
             <img src="images/0.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/1.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/2.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/3.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/4.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/5.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/6.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/7.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/8.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/9.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/10.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/11.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/12.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/13.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/14.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/15.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/16.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/17.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/18.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/20.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/21.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/22.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/23.jpg">
         </div>
     </div>
     <div class="box">
         <div class="pic">
             <img src="images/24.jpg">
         </div>
     </div>
 </div>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/index.js"></script>
</body>
</html>

css

*{
    padding: 0;
    margin: 0;
}

/*父盒子*/
#main{
    /*绝对定位*/
    position: relative;
}

/*子盒子*/
.box{
    /*background-color: red;*/
    /*浮动*/
    float: left;

    /*内边距*/
    padding:15px 0 0 15px;
}

.pic{
    /*边框*/
    border:1px solid #dddddd;
    /*内边距*/
    padding: 10px;

    background-color: white;

    /*圆角*/
    border-radius: 5px;
}

.pic img{
    width: 165px;
}

$(function () {
    // 1. 实现瀑布流布局
    waterFull();
    // 2. 动态加载新的盒子
    $(window).on('scroll', function () {
        // 2.1 判断是否具备加载的条件
        if (checkWillLoadImage()) { // true
            console.log(1111);
            // 2.2 造数据
            var dataArr = [
                {'src': '0.jpg'},
                {'src': '3.jpg'},
                {'src': '4.jpg'},
                {'src': '7.jpg'},
                {'src': '8.jpg'},
                {'src': '10.jpg'},
                {'src': '12.jpg'},
                {'src': '30.jpg'}
            ];
            // 2.2 遍历假数据, 不断加载
            $.each(dataArr, function (index, value) {
                // 1. 创建标签
                 var newBox = $('<div>').addClass('box').appendTo($('#main'));
                 var newPic = $('<div>').addClass('pic').appendTo($(newBox));
                 $('<img>').attr('src', 'images/' + $(value).attr('src')).appendTo($(newPic));
                console.log($(value).attr('src'));
            });
            // 2.3 重新布局
            waterFull();
        }
    })
});

/**
 * 实现瀑布流的布局
 */
function waterFull() {
    // 1. 求出父盒子的宽度
    //  1.1 获取所有的子盒子
    var allBox = $('#main>.box');
    // 1.2 求出子盒子的宽度
    var boxWidth = allBox.eq(0).outerWidth();
    // 1.3 获取窗口的宽度
    var clientW = $(window).width();
    // 1.4 求出总列数
    var cols = Math.floor(clientW / boxWidth);

    // 1.5 父盒子居中
    $('#main').css({
        width: cols * boxWidth + 'px',
        margin: '0 auto'
    });

    // 2. 子盒子定位
    //  2.1 定义变量
    var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex = 0;
    // 2.2 遍历所有的子盒子
    $.each(allBox, function (index, value) {
        // 2.2.1 求出每一个子盒子的高度
        boxHeight = $(value).outerHeight();
        // 2.2.2 取出第一行盒子的高度放入高度数组中
        if (index < cols) { // 第一行
            heightArr.push(boxHeight);
        } else { // 剩余行的盒子
            // 2.2.3 取出数组中最矮的高度
            minBoxHeight =  Math.min.apply(this, heightArr);
            // 2.2.4 求出最矮高度对应的索引
            minBoxIndex =  $.inArray(minBoxHeight, heightArr);
            // 2.2.5 盒子定位
            $(value).css({
                position: 'absolute',
                left: minBoxIndex * boxWidth + 'px',
                top: minBoxHeight + 'px'
            });
            // 2.2.6 更新最矮的高度
            heightArr[minBoxIndex] += boxHeight;
        }
    });
}

/**
 * 判断是否具备加载子盒子的条件
 * @returns {boolean}
 */
function checkWillLoadImage() {
    // 1. 获取最后一个盒子
    var lastBox = $('#main>.box').last();
    // 2. 求出高度
    var lastBoxDis = $(lastBox).outerHeight() * 0.5 + $(lastBox).offset().top;
    // 3. 求出窗口的高度
    var clientH =  $(window).height();
    // 4. 求出页面滚动产生的高度
    var scrollTopH = $(window).scrollTop();
    // 5. 对比
    return lastBoxDis <= clientH + scrollTopH;
}

运行结果

jQuery实现瀑布流
不断延伸

jQuery实现瀑布流

知识点

代码

运行结果

js与jQuery实现的兼容多浏览器Ajax请求实例

利用 Linq+Jquery+Ajax 实现异步分页功能可简化带宽压力

jQuery实现的Div窗口震动特效

JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】

jquery简单实现滚动条下拉DIV固定在头部不动

jquery checkbox实现单选小例

jquery实现弹出窗口效果的实例代码

jquery实现动态菜单的实例代码

js与jQuery实现获取table中的数据并拼成json字符串操作示例

jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一