jQuery实现瀑布流布局

最新推荐文章于 2023-05-29 23:38:41 发布

佛系卡卡

最新推荐文章于 2023-05-29 23:38:41 发布

阅读量756

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery

本文链接：https://blog.csdn.net/solo_1108/article/details/107123271

本文深入讲解瀑布流布局的实现原理及应用，通过实例演示如何使用jQuery进行元素的宽度计算、定位布置，以及高度动态追加，适用于网页设计与前端开发人员。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

瀑布流布局

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

布局效果

在这里插入图片描述

原理

瀑布流布局要求要进行布置的元素等宽
计算浏览器宽度与元素的宽度之比，得到列数
创建数组，存储每列元素总高度
each遍历循环各个图片，判断是否为第一排，若是，则将元素高度直接加入数组中，若不是，则定位布置到高度最小的一列，同时更新当前列的总高度。

jQuery获取元素宽度

在jQuery中，四种宽度

width()方法用于获得元素宽度；
innerWidth()方法用于获得包括内边界（padding）的元素宽度
outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度
如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来，即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。
对于同一个元素应该是：width()<=innerWidth()<=outerWidth()<=outerWidth(true);
实例：

<p id="p_obj" style=" width:200px; padding:10px; border:10px solid blue; margin:10px;">This is a paragraph.</p>
<button class="btn1">输出高度</button>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
var obj=$("#p_obj");
alert(obj.width());//200
alert(obj.innerWidth());//220
alert(obj.outerWidth());//240
alert(obj.outerWidth(true));//260
});
});
</script>

定位布置

元素css为

position：absolute；
left：最小高度盒子的索引*盒子的宽度
top：最小盒子的高度
求最小盒子高度，即获取数组中的最小值，利用Math.min方法获取最小值。但我们知道Math.min()参数不能为数组，而为序列。于是利用ES6中的扩张运算符…转换。代码如下：

   //最小图片高度，求数组中的最小值
   var minBoxHeight=Math.min(...heightArr);

求数组中最小值的索引，利用jQuery中的inArrays(查找的值，数组)方法返回查找值所的索引，如果不存在则返回-1。

   //最小的索引,$.inArray()用于查找对应数组中指定值的索引。(未匹配成功的话，返回-1)
   var minBoxIndex=$.inArray(minBoxHeight,heightArr)

最后定位布置，高度追加

   var minBoxIndex=$.inArray(minBoxHeight,heightArr)
           $(item).css({
               position:'absolute',
               left:minBoxIndex*boxWidth+'px',
               top:minBoxHeight+'px'
           })
           //高度追加
           heightArr[minBoxIndex]+=boxHeight;

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script src="./js/demo1.js"></script>
    <title>Document</title>
    <style>
     #main{
     position: relative;
        }
    .box{
        width: 280px;
        padding: 5px;
        float: left;
    }
    </style>
</head>
<body>
    <div id="main">
        <div><img  class="box" src="./img/1.jpg"/></div>
        <div><img  class="box" src="./img/2.jpg"/></div>
        <div><img  class="box" src="./img/3.jpg"/></div>
        <div><img  class="box" src="./img/4.jpg"/></div>
        <div><img  class="box" src="./img/5.jpg"/></div>
        <div><img  class="box" src="./img/6.jpg"/></div>
        <div><img  class="box" src="./img/7.jpg"/></div>
        <div><img  class="box" src="./img/8.jpg"/></div>
        <div><img  class="box" src="./img/9.jpg"/></div>
        <div><img  class="box" src="./img/10.jpg"/></div>
        <div><img  class="box" src="./img/11.jpg"/></div>
        <div><img  class="box" src="./img/12.jpg"/></div>
        <div><img  class="box" src="./img/13.jpg"/></div>
        <div><img  class="box" src="./img/14.jpg"/></div>
        <div><img  class="box" src="./img/15.jpg"/></div>
        <div><img  class="box" src="./img/16.jpg"/></div>    
    </div>
</body>
</html>

jQuery代码

// $(function(){
//  waterFall()
// })//dom元素加载完就执行js
$(window).on('load',function(){
    waterFall();
})//等到dom元素，图片，内容都加载完才会执行js
function waterFall(){ 
    var box=$(".box");
    var boxWidth=box.innerWidth();//当前图片宽度
    var screenWidth=$(window).width();//当前屏幕宽度
    //求出列数
    var cols=parseInt(screenWidth/boxWidth);
    //创建数组
    var heightArr=[];
    //遍历循环，除第一排不需要定位，取高度值其他排定位处理
    $.each(box,function(index,item)
    {
        //取出对应图片的高度
        var boxHeight=$(item).innerHeight();
        if(index<cols)//是不是第一排的
        {
            heightArr[index]=boxHeight;
        }
        else{
            //最小图片高度，求数组中的最小值
            var minBoxHeight=Math.min(...heightArr);
            //最小的索引,$.inArray()用于查找对应数组中指定值的索引。(未匹配成功的话，返回-1)
            var minBoxIndex=$.inArray(minBoxHeight,heightArr)
           $(item).css({
               position:'absolute',
               left:minBoxIndex*boxWidth+'px',
               top:minBoxHeight+'px'
           })
           //高度追加
           heightArr[minBoxIndex]+=boxHeight;
        }
    })
}