js瀑布流效果布局

最新推荐文章于 2024-05-29 10:08:35 发布
最新推荐文章于 2024-05-29 10:08:35 发布
阅读量149 收藏
点赞数
文章标签： 前端 瀑布流效果布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45863735/article/details/103127619
版权

js瀑布流效果布局

找10张图片
html代码如下：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>js瀑布流效果布局</title>
        <link rel="stylesheet" type="text/css" href="css.css">
        <script src="app.js"></script>
    </head>
    <body>
        <div id="container">
            <div class="box">
                <div class="box_img">
                    <img src="img/1.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/2.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/3.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/4.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/5.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/6.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/7.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/8.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/9.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/10.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/1.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/2.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/3.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/4.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/5.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/6.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/7.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/8.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/9.jpg">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="img/10.jpg">
                </div>
            </div>
       </div>
    </body>
</html>

然后css样式把每张图片的样式设置好。
css代码如下：

*{
    margin: 0px;
    padding: 0px;
}
#container{
    position: relative;
}
.box{
    padding: 5px;
    float: left;
}
.box_img{
    padding: 5px;
    border: 1px solid #cccccc;
    box-shadow: 0 0 5px #ccc;
    border-radius: 5px;
}
.box_img img{
    width: 150px;
    height:auto;
}

然后最关键的就是js代码部分：

window.onload=function(){
    imgLocation("container","box");
    var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]}
    window.onscroll=function(){
        if(checkFlag()){
            var cparent=document.getElementById("container");
            for(var i=0;i<imgData.data.length;i++){
                var ccontent=document.createElement("div");
                ccontent.className="box";
                cparent.appendChild(ccontent);
                var boximg=document.createElement("div");
                boximg.className="box_img";
                ccontent.appendChild(boximg);
                var img=document.createElement("img");
                img.src="img/"+imgData.data[i].src;
                boximg.appendChild(img);
            }
            imgLocation("container","box");
        }
    }
}
function checkFlag(){
    var cparent=document.getElementById("container");
    var ccontent=getChildElement(cparent,"box");
    var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
    if(lastContentHeight<scrollTop+pageHeight){
        return true;
    }
}

function imgLocation(parent,content){
    //将parent下所有的contnet全部取出
    var cparent=document.getElementById(parent);
    var ccontent=getChildElement(cparent,content);
    var imgWidth=ccontent[0].offsetWidth;
    var num=Math.floor(document.documentElement.clientWidth/imgWidth);
    cparent.style.cssText="width:"+imgWidth*num+"px;margin:0 auto";

    var BoxHeightArr=[];
    for(var i=0;i<ccontent.length;i++){
        if(i<num){
            BoxHeightArr[i]=ccontent[i].offsetHeight;
        }else{
            var minheight=Math.min.apply(null,BoxHeightArr);
           var minIndex=getminheightLocation(BoxHeightArr,minheight);
            ccontent[i].style.position="absolute";
            ccontent[i].style.top=minheight+"px";
            ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
            BoxHeightArr[minIndex]=BoxHeightArr[minIndex]+ccontent[i].offsetHeight;
        }
    }
}
function getminheightLocation(BoxHeightArr,minHeight){
    for(var i in BoxHeightArr){
        if(BoxHeightArr[i]==minHeight){
            return i;
        }
    }
}

function getChildElement(parent,content){
    var contentArr=[];
    var allcontent=parent.getElementsByTagName("*");
    for(var i=0;i<allcontent.length;i++){
        if(allcontent[i].className==content){
            contentArr.push(allcontent[i]);
        }
    }
    return contentArr;
}

以上代码运行可以得到瀑布流布局效果，大家可以照这个上面运行。

最酷程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【JavaScript】瀑布流布局
等时钟成长
07-13 1548
瀑布流布局
javascript瀑布流布局实现方法详解
10-22
总的来说，实现JavaScript瀑布流布局需要理解HTML结构、CSS样式以及JavaScript事件和DOM操作。通过对元素的动态布局和数据的实时加载，我们可以创建出一个既美观又响应式的瀑布流布局。这种布局方法在博客、产品展示...
js实现瀑布流
Pikachu_999的博客
06-28 1166
从第二行开始，将每个图片放在高度最小的位置，视觉上会表现为参差不齐的布局。实现的方式：对应父元素进行相对定位，图片所在的盒子进行绝对定位。8、对非第一行的pic进行定位，top为最小值的高，left为pic宽加行间距乘以最小值的索引。5、将获取的pic的高push到一个数组记录下来。三、获取可视窗口waterfall节点的宽度。2、将可视窗口宽度减去行间隔的宽度。6、在非第一行中，找到数组的最小值。1、设置每一个pic的宽度。四、计算每个pic的宽度。2、获取每一个pic的高。4、给第一行的进行定位。
js实现瀑布流布局
最新发布
qq_40063198的博客
05-29 197
不用图片高度、定位的方式实现瀑布流
JS实现页面瀑布流效果
gsy445566778899的博客
05-26 1722
瀑布流，是比较流行的一种网站页面，视觉表现为参差不齐的多栏布局，随着窗口的缩放会自动计算并重新排序；
如何用原生js实现瀑布流布局【详细版！！！】
SH744的博客
09-10 403
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动天向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinteres，逐渐在国内流行开来。国内大多数清新站基本为这类风格。琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。唯美：图片的风格以唯美的图片为主。操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。例如下图：苏宁的官网 例如下图：网站布局 瀑布流布局的特点是等宽不等高。为了让最
Metro风兼瀑布流布局效果
06-10
【标题】：“Metro风兼瀑布流布局效果” 在网页设计领域，Metro风格源自微软的Windows 8操作系统，它以其简洁、方格化的界面设计而受到欢迎。瀑布流布局则是一种常见的网页展示方式，通常用于图片或者商品展示，...
JavaScript瀑布流布局实现代码
10-19
JavaScript瀑布流布局是一种常见的网页设计布局方式，常用于展示大量且尺寸不一的内容，如图片、文章摘要等。它的特点是内容元素（如图片）在页面上以多列的形式呈现，每列的高度根据其中元素的最高内容自适应，形成...
vue实现简单瀑布流布局
10-15
在本文中，我们将深入探讨如何使用Vue.js实现一个简单的瀑布流布局。瀑布流布局是一种常见的网页设计模式，它通常用于展示图像或内容，如社交媒体、电商产品列表等。这种布局的特点是容器宽度固定，而高度根据内容...
原生JS瀑布流布局，无限加载
09-01
在原生JavaScript中实现瀑布流布局，不仅可以避免对特定库或框架的依赖，还能提高页面性能，特别是在处理大量数据和动态加载时。 一、瀑布流布局的基本原理 1. 确定列数：首先，我们需要确定页面的列数。这通常基于...
html5响应式动态网格图片瀑布流布局
09-01
html5响应式动态网格图片瀑布流布局
纯css3 弹性布局瀑布流
11-04
纯css3 弹性布局瀑布流
三种方式实现瀑布流布局
10-20
本文主要介绍了分别使用javascript，jquery，css实现瀑布流布局的方法。具有很好的参考价值，下面跟着小编一起来看下吧
瀑布流布局Demo.html
09-10
一个基于vue的瀑布流布局小demo，思路是通过js给容器内的每一个内容块定位，从而实现优先补短的瀑布流布局。
ReactNative初级到项目实战
12-19
对课程有什么问题或者有什么好的建议都可以联系Hank老师QQ：471926977从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目。新颖、实用、详尽的ReactNative初级课程，本教程涵盖ReactNative官方的新组件和实践，甚至包括尚未正式发布的新特性时”！
JS实现瀑布流布局(附代码)
yy168888的博客
01-15 3569
你可以准备一些长宽都不相等的图片。 瀑布流特点 等宽不等高 为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面 实现思路 设定每一列图片的宽度和间距 获取当前窗口的总宽度，从而根据图片宽度去判断分为几列 获取所有图片元素，定义一个空数组来保存高度 遍历容器 4.1 第一排，top固定 为gap；left 根据列数递增 为 (itemWidth+gap)i + gap 4.2 非第一批, top( minHeight+gap2) left的计算方式和4.1一样，其中i的位置是mi
JS 瀑布流
梦想家博客
03-30 205
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; * { ma
vue3 js瀑布流布局组件
09-02
Vue.js 中可以使用第三方库实现瀑布流布局组件，比如 Masonry 或 Waterfall.js。这些库可以帮助你实现动态的瀑布流效果。 首先，你需要安装相关的库，可以通过 npm 或 yarn 安装。例如，使用 Masonry 库，可以执行...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值