js实现瀑布流布局

最新推荐文章于 2023-06-28 17:26:58 发布
最新推荐文章于 2023-06-28 17:26:58 发布
阅读量418 收藏 2
点赞数
分类专栏： javascript 文章标签： 前端网页divcss静态 html javascript 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yugang930823/article/details/52249600
版权

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局JS</title>
    <link rel="stylesheet" href="index.css">
    <script src="../http_code.jquery.com_jquery-2.0.0.js"></script>
</head>
<body>

<div id="main">

    <div class="box">
        <div class="pic">
            <img src="images/0.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/3.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/4.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/5.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/6.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/7.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/8.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/9.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/10.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/11.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/12.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/13.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/14.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/15.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/16.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/17.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/18.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/19.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/20.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/21.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/22.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/23.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/24.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/25.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/26.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/27.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/28.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/29.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/30.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/31.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/32.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/90.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/33.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/34.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/35.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/36.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/37.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/38.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/39.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/40.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/41.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/42.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/43.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/44.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/45.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/56.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/47.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/48.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/49.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/50.jpg" alt="">
        </div>
    </div>


</div>

<script src="app.js"></script>
</body>
</html>


css代码


*{
    margin:0;
    padding: 0;
}
#main{
    position: relative;
}

.box{
    padding: 15px 0 0 15px;
    float: left;
}
.pic{
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #cccccc;
}
.pic img{
    width: 165px;
    height: auto;
}


js 代码



/**
 * Created by mac on 16/8/19.
 */
window.onload=function () {

     waterfall('main','box');



};

function waterfall(parent,box) {
    //取出main下的class为box取出来

    var oParent=document.getElementById('main');
    var oBoxs=getByClass(oParent,box);
    // console.log(oBoxs.length)
    //计算整个页面的显示列数     页面宽/box宽
    var oBoxW=oBoxs[0].offsetWidth;
    var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
     oParent.style.cssText='width:'+oBoxW*cols+'px:margin:0 auto';

    var hArr=[];
    for(var i=0;i<oBoxs.length;i++){
        if(i<cols){
            hArr.push(oBoxs[i].offsetHeight);
        }else{
            var minH=Math.min.apply(null,hArr);
            // console.log(minH)
            var index= getMinhIndex(hArr,minH);
            oBoxs[i].style.position='absolute';
            oBoxs[i].style.top=minH+'px';
            oBoxs[i].style.left=oBoxW*index+'px';
            hArr[index]+=oBoxs[i].offsetHeight;
        }
    }

}

//根据class获取元素
function getByClass(parent,clsName) {
    var boxArr=new Array();//存储class为box的元素
    var oElements=parent.getElementsByTagName('*');
    for(var i=0;i<oElements.length;i++){
        if(oElements[i].className==clsName){
            boxArr.push(oElements[i]);
        }
    }
    return boxArr;
}


function getMinhIndex(arr,val) {
    for(var i in arr){
        if(arr[i]==val){
            return i;
        }
    }
}

於刚
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现瀑布流布局
12-29
本文实例为大家分享了JS实现瀑布流布局展示的具体代码，供大家参考，具体内容如下 html部分 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>瀑布流布局</...
原生JavaScript实现瀑布流布局
10-23
代码中的`waterfall`函数是实现瀑布流布局的核心。它接受两个参数：`parent`表示包含所有“pin”元素的父级ID，`pin`则是这些元素的class名。函数首先获取父级元素，然后计算出单个“pin”元素的宽度，以及浏览器...
瀑布流布局
前端精髓
12-25 743
要实现的效果如下图： 首先最容易想到的就是分两列，然后把内容添加进行就可以了。 <style> .container { display: flex; flex-direction: row; justify-content: space-between; padding: 12px; } .left,.right { margin-right: 6px; flex: 1; } &l
js实现瀑布流
Pikachu_999的博客
06-28 1152
从第二行开始，将每个图片放在高度最小的位置，视觉上会表现为参差不齐的布局。实现的方式：对应父元素进行相对定位，图片所在的盒子进行绝对定位。8、对非第一行的pic进行定位，top为最小值的高，left为pic宽加行间距乘以最小值的索引。5、将获取的pic的高push到一个数组记录下来。三、获取可视窗口waterfall节点的宽度。2、将可视窗口宽度减去行间隔的宽度。6、在非第一行中，找到数组的最小值。1、设置每一个pic的宽度。四、计算每个pic的宽度。2、获取每一个pic的高。4、给第一行的进行定位。
纯css瀑布流布局示例详细讲解
约妲己吃火锅的博客
03-01 1019
这是我在做公司官网时候遇到的问题，UI设计图样式如下： 问题分析： 首先，看见这个UI设计图：它呈左右两列不规则分布，而且也能发现width宽度、heigth高度等都不相同。 思路分析： 毫无疑问，我们用简单的div布局+css做的话是可以达到这样的效果的，只是这样很low，不灵活，而且需要反复布局排版，代码量也不简单！ 此时，这个用瀑布流的话会简单不少！ 原理+实现： 瀑布流：又称瀑布流式布局，是比较流行的一种网站页面布局方式，能够提升用户的体验感。它是多行等宽元素排列，等宽不等高或者宽高都不相同，后面
JS实现页面瀑布流效果
gsy445566778899的博客
05-26 1713
瀑布流，是比较流行的一种网站页面，视觉表现为参差不齐的多栏布局，随着窗口的缩放会自动计算并重新排序；
微信小程序通过js实现瀑布流布局详解
10-16
本篇文章将深入探讨如何在微信小程序中通过JavaScript实现瀑布流布局。 首先，瀑布流布局的基本思想是固定列宽，让元素高度自适应，并且保持列与列之间的无缝对接。这样，当元素高度不一致时，依然能保持良好的视觉...
原生js实现瀑布流布局
01-19
用js实现瀑布流布局以及通过模拟的数据加载图片，已标记注释 效果如图： <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title>瀑布流布局-JS实现</title> &lt...
实现瀑布流布局的四种方法
热门推荐
Smile_666666的博客
05-13 2万+
一、 什么是瀑布流布局 1、是什么 页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面 2、特点 固定宽度，高度不一 岑参不齐的布局 以图片为主 二、有什么优缺点 1、优点 节省空间：降低页面的复杂 对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉 良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，
在js中的瀑布流布局理解
浮生离梦的博客
06-02 1586
一、瀑布流的理解 瀑布流 1）图片的宽度固定，图片的长度不一样 2）当页面滚动时 ，会再次加载数据，动态的渲染在页面上 3）是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局 4）随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部 5）瀑布流的常见布局方式有三种，分别是等高等宽、等高不等宽和等宽不等高 瀑布流布局的原理 1）设置图片宽度一致 2）根据浏览器宽度以及每...
原生JS实现瀑布流布局
CaseyWei
08-14 1259
一.瀑布流之准备工作 　　   首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话可以尝试着写下网络的, 不过本地和远端的大致是相同的. 那么我就来简单介绍下本地的瀑布流效果吧, 我们要先准备好八九张图片, 当然啦, 我们实现的是瀑布流效果, 所以最好是高度不相同的, 这样才可以看出来效果, 对吧, 嘿嘿. 二.代码的准备工作 　　  我们打开开发工具, 先建个ht...
JavaScript实现瀑布流布局
pfqian的博客
04-17 446
瀑布流布局有一个特点，所有列的宽度都相同，而高度不相同，如下图所示 <div class="pic-box"> <div class="pic"> <img src="img/1.jpg" alt="1"> </div> </div>通过div.pic-box来控制每个盒子之间的间隔，div.pic来设置每个盒子的边框。img的宽度为200px，由于div.pic-
jq实现瀑布流布局
Something的博客
07-04 2875
效果图：可以看到，除了第一行，接下来的图片都是添加在高度最低的那一列下面。因此我用了一个数组heightArr存放每一列的高度，每次选择高度最低的那列进行插入，随后更新当行列的高度。css： .box{ position: relative; margin: 0 auto; } .item{ position: absolute; ...
vue实现瀑布流布局
最新发布
07-28
Vue可以通过使用第三方库来实现瀑布流布局。一个常用的库是Masonry，它提供了一个Vue组件来实现瀑布流布局。 首先，你需要安装Masonry库。可以通过命令行运行以下命令来安装： ``` npm install vue-masonry --save...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值