javascript--瀑布流

最新推荐文章于 2022-11-08 09:46:56 发布
最新推荐文章于 2022-11-08 09:46:56 发布
阅读量792 收藏
点赞数
分类专栏： javascript基础学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zz410675629/article/details/38930535
版权

简单瀑布流代码实现

html代码如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/waterfall.js"/></script>

<title>瀑布流-zhangzhang</title>
<style type="text/css">
    *{padding: 0;margin:0;}
    #main{
        position: relative;
    }
    .pin{
        padding: 15px 0 0 15px;
        float:left;
    }
    .box{
        padding: 10px;
        border:1px solid #ccc;
        box-shadow: 0 0 6px #ccc;
        border-radius: 5px;
    }
    .box img{
        width:162px;
        height:auto;
    }
</style>
</head>
<body>
<div id="main">
    <div class="pin">
        <div class="box">
            <img src="./images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/3.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/4.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/3.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/4.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/5.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/3.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/4.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/3.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/4.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/5.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/3.jpg"/>
        </div>
    </div>
      <div class="pin">
        <div class="box">
            <img src="./images/5.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/3.jpg"/>
        </div>
    </div>
      <div class="pin">
        <div class="box">
            <img src="./images/5.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/3.jpg"/>
        </div>
    </div>
      <div class="pin">
        <div class="box">
            <img src="./images/5.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="./images/3.jpg"/>
        </div>
    </div>
</div>
</body>
</html>

waterfallJS如下： 

window.οnlοad=function(){

    waterfall('main','pin');

    var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
    
    window.οnscrοll=function(){
        if(checkscrollside()){
            var oParent = document.getElementById('main');// 父级对象
            for(var i=0;i<dataInt.data.length;i++){
                var oPin=document.createElement('div'); //添加 元素节点
                oPin.className='pin';                   //添加 类名 name属性
                oParent.appendChild(oPin);              //添加 子节点
                var oBox=document.createElement('div');
                oBox.className='box';
                oPin.appendChild(oBox);
                var oImg=document.createElement('img');
                oImg.src='./images/'+dataInt.data[i].src;
                oBox.appendChild(oImg);
            }
            waterfall('main','pin');
        };
    }
}

/*
    parend 父级id
    pin 元素id
*/
function waterfall(parent,pin){
    var oParent=document.getElementById(parent);// 父级对象
    var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin
    var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽
    var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
    oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//设置父级居中样式：定宽+自动水平外边距

    var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
    for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素
        var pinH=aPin[i].offsetHeight;
        if(i<num){
            pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr
        }else{
            var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH
            var minHIndex=getminHIndex(pinHArr,minH);
            aPin[i].style.position='absolute';//设置绝对位移
            aPin[i].style.top=minH+'px';
            aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';
            //数组 最小高元素的高 + 添加上的aPin[i]块框高
            pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高
        }
    }
}

/****
    *通过父级和子元素的class类 获取该同类子元素的数组
    */
function getClassObj(parent,className){
    var obj=parent.getElementsByTagName('*');//获取 父级的所有子集
    var pinS=[];//创建一个数组 用于收集子元素
    for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、压入数组
        if (obj[i].className==className){
            pinS.push(obj[i]);
        }
    };
    return pinS;
}
/****
    *获取 pin高度 最小值的索引index
    */
function getminHIndex(arr,minH){
    for(var i in arr){
        if(arr[i]==minH){
            return i;
        }
    }
}


function checkscrollside(){
    var oParent=document.getElementById('main');
    var aPin=getClassObj(oParent,'pin');
    //创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
    var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性
    var documentH=document.documentElement.clientHeight;//页面高度
    return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
}




zz410675629
关注
专栏目录
javascript --- > 瀑布流的实现
栗子好好吃的博客
02-07 219
说明 源代码 1. 瀑布流 出现问题: 设计给的图片不是同一个尺寸大小,因此不能规则的放入到给定的DOM结构中.此时,需要使用瀑布流技术来解决这个问题 解决的思路: 让图片等宽、不等高 核心: 用到了定位 img { position: absolute; left: 最小的索引 * 图片的宽度; top: 最小的图片的高度; } 算法如下: ...
两行CSS代码实现瀑布流
Mr.Starl
06-30 250
/*分几列*/ column-count: 3; /*不留白*/ break-inside: avoid; /*列间距，可有可无，默认30px*/ column-gap: 20px; 其他CSS属性自行设置
瀑布流布局的实现
小皮咖的博客
10-30 1470
提出问题 如何实现图片的瀑布流布局？ 实现思路 两种方法，一种是 CSS 实现，能实现页面响应式瀑布流，使用 column-width 和 column-gap 属性。另一种是 JS 实现，通过获取窗口宽度计算首行填充图片个数，定义行高度数组。然后将 DOM 操作修改第二行第一个元素的绝对定位，使其位于上一行高度最小的元素之下，并求和这两个元素的高度，更新高度数组。 解决问题详细代码请点击这
实现瀑布流布局的四种方法
Smile_666666的博客
05-13 2万+
一、 什么是瀑布流布局 1、是什么 页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面 2、特点 固定宽度，高度不一 岑参不齐的布局 以图片为主 二、有什么优缺点 1、优点 节省空间：降低页面的复杂 对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉 良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，
两行两列瀑布流图片排列布局（uniapp、小程序）
最新发布
weixin_58387292的博客
11-08 1598
【代码】两行两列瀑布流图片排列布局（uniapp、小程序）
瀑布流完整实现demo
03-01
这是一个完整的瀑布流的demo，实现方法也比较清爽，值得一看
vue.js组件vue-waterfall-easy实现瀑布流效果
12-12
Vue-waterfall-easy 是一个专为 Vue.js 设计的瀑布流插件，旨在简化瀑布流布局的实现过程，提供易用性和性能。 在 Vue.js 中实现瀑布流效果，通常需要处理元素的排列和动态加载问题。Vue-waterfall-easy 提供了一种...
转载：酷炫背景------瀑布流
11-06
实现瀑布流布局有多种方法，比如使用纯CSS的Flexbox或Grid，或者使用JavaScript库如jQuery Masonry、Isotope等。而Canvas的引入，则为瀑布流增加了互动性和趣味性，使用户体验更加独特和引人入胜。 总之，“酷炫...
瀑布流.7z-手写图片瀑布流效果
11-17
加载新图片后，JavaScript需要计算新添加元素的位置，确保它们能够无缝地融入现有布局中，保持瀑布流的效果。此外，JavaScript还可以用来处理图片的预加载，提高用户体验，防止页面在加载大量图片时出现卡顿。 总的...
微信小程序-瀑布流布局.zip
04-20
瀑布流布局，又称瀑布式布局或Pinterest布局，是网页设计中常见的一种展示方式，尤其适用于图片或者商品展示，因为它可以有效地利用屏幕空间，让用户在滚动页面时获得连续且富有视觉冲击力的体验。 在微信小程序中...
超级简单的瀑布流加载数据
花神的博客
03-21 1万+
瀑布流是我们经常用到的加载方式，对于大量数据加载优化效果十分明显，这里我使用非常简单的代码来实现瀑布流，需要的朋友尽管copy：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="aplus-terminal" content="1"> <meta na
css3实现瀑布流布局+缺点用户体验差，但是性能高于js，jq，使用column属性
於刚的博客
08-19 2736
#main{ -webkit-column-width: 202px; -moz-column-width:202px; } .box{ padding: 10px 0 0 15px; } .pic{ padding:10px; border: 1px solid #cccccc; border-radius: 5px; box-shado
浅析瀑布流布局原理及实现方式
qq_47443027的博客
08-29 2万+
一、瀑布流 　　瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了，我最早知道这个名词的时候大约是在2012年，当时Pinterest网站的布局就是使用的这种流式布局，简言之像Pinterest网站这样的布局就称之为瀑布流布局，也有人称之为Pinterest 布局。 　　瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。 　　瀑
css实现瀑布流布局
谢院柯的博客
04-30 5532
1.column 多行布局实现瀑布流 column 实现瀑布流主要依赖两个属性。 一个是 column-count 属性，是分为多少列。 一个是 column-gap 属性，是设置列与列之间的距离。 <style> .box { margin: 10px; column-count: 3; col...
瀑布流布局的原理及实现
Preeminent
01-13 1万+
瀑布流很漂亮~但其实实现起来很简单，让我们来实现一下吧瀑布流布局的原理 瀑布流布局要求要进行布置的元素等宽，然后计算元素的宽度与浏览器宽度之比，得到需要布置的列数。 创建一个数组，长度为列数，里面的值为已布置元素的总高度（最开始为0） 然后将未布置的元素依次布置到高度最小的那一列，就得到了瀑布流布局。 瀑布流布局实现下面是我实现的瀑布流布局 代码、预览
javascript---input输入框自动聚焦优化
热门推荐
zz410675629的专栏
05-17 3万+
实现原理： 1、当打开注册或者登录的页面时候，默认聚焦到第一个Input（多为用户名对应的那个Input）。 2、有种因素当js还没加载完，此时页面先加载完毕并且用户已经填写到了第二个Input（多为密码对应的那个Input）了，此时就不需要再聚焦到第一个输入框了。 根据上边的原理，可以编写的代码如下 第一种实现：
javascript之解决dom中存在的空白节点问题
zz410675629的专栏
08-14 4331
下面有一段html文档 Introduction to the DOM There are a number of reasons why the DOM is awesome, here are some: It can be found everywhere. It's easy to use. It can
javascript---对象和函数的引用、浅拷贝、深拷贝、递归
zz410675629的专栏
04-19 3627
javascript---对象和函数的引用、浅拷贝、深拷贝、递归等相关问题！
使用JavaScript实现动态瀑布流布局
实现JavaScript瀑布流布局需要理解布局原理，掌握DOM操作和事件处理，以及一定的性能优化技巧。通过本文的实例，开发者可以学习到如何用纯JavaScript实现这一功能，这对于提升前端开发技能和应对各种布局需求是非常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值