JavaScript—瀑布流

ゝ一纸荒年。 2023-10-11 13:16 5阅读 0赞

现在网页中需要翻页的列表，好多都已经改为瀑布流了。所以这个思路还是特别重要的

## HTML ##

![797834-20190505103055146-1584175827.png][]

## Css ##

![797834-20190505103033054-173604000.png][]

# 页面 #

![797834-20190505103005516-2095769387.png][]

因为每个图片的高度不一样所以她的 top 和left 我们待会通过JS计算 动态生成

# js部分 思路注释 #

<script>
        // 1.获取父容器的宽度 获取子容器的宽度 算出一列放多少个，边距
        // 2.通过计算盒子的高度，布局方法
        // 3.瀑布流启动
        //获取父容器
        let itemBox=document.getElementById('itembox')
        //父容器宽度
        let iBoxW=itemBox.offsetWidth;
        // 子容器和宽度
        let item=document.getElementsByClassName('item')
        let itemW=item[0].offsetWidth
        //列数
        const rowNum=Math.floor(iBoxW/itemW)
        //间距
        const distents=Math.floor((iBoxW-itemW*rowNum)/rowNum)
    
        // console.log(distents,rowNum)
        // 每个图片的left=列数*（图片大小+间距）
        //每个图片的top值为当前高度最低的top
            //保存每列的高度、索引就是我们放的列数,值就是top
        let  arr=[]
    
        // 实现布局
        for (let i=0;i<item.length;i++){
            // 第一排top为0
            if (i<rowNum){
                item[i].style.left=i*(itemW+distents)+'px';
                item[i].style.top='0px'
                arr[i]=item[i].offsetHeight;
            }
            // 第二 三 四。。。。排
            else {
                let Minarr=MinArr(arr)
                item[i].style.left=Minarr.index*(itemW+distents)+'px';
                item[i].style.top=Minarr.min+'px'
                console.log(item[i].offsetHeight,arr)
                //更新数组高度
                arr[Minarr.index]+=item[i].offsetHeight
            }
        }
    
        let json=['bl1.jpg','bl5.jpg','bl6.jpg','bl7.jpg','bl8.jpg','bl4.jpg','bl3.jpg','bl2.jpg','CJD2.jpg','CJD4.jpg','CJD1.jpg','CJD3.jpg']
       console.log(MinArr(arr),arr)
        //启动瀑布流
           //滚动事件
        window.οnscrοll=function () {
           //浏览器可视高度
            let toH=window.innerHeight
            //浏览器滚动超出的高度
            let doH=window.pageYOffset
            let Minarr=MinArr(arr)
    
            //当这2个值+起来>最小列宽度时加载数据
            if (toH+doH>Minarr.min){
                for (let i=0;i<json.length;i++){
                    //创建元素
                    let div=document.createElement('div')
                    div.className='item'
                    let img=document.createElement('img')
                    img.src='images/'+json[i]
                    //设置TOP left
                    // 每个图片的left=列数*（图片大小+间距）
                    //每个图片的top值为当前高度最低的top
                    div.style.top=Minarr.min+'px'
                     div.style.left = Minarr.index*(itemW+distents)+'px';
                    //添加
                    div.appendChild(img)
                    itemBox.appendChild(div)
                    //保存每列的高度、索引就是我们放的列数,值就是top
                    arr[Minarr.index]+=div.offsetHeight
                    // 重新排序
                    Minarr=MinArr(arr)
                }
    
                //后期用AJAX 改变JSOn的值
            }
        }
    
        //最小高度和索引
        function MinArr(arr) {
            let mArr={}
            mArr.min=arr[0]
            mArr.index=0;
            for (let i=1;i<arr.length;i++){
                if (mArr.min>arr[i]){
                    mArr.min=arr[i]
                    mArr.index=i;
                }
            }
            return mArr
        }
    
    
    
    
    </script>

# 疑问 #

document.body.clientWidth ==> BODY对象宽度  
document.body.clientHeight ==> BODY对象高度  
document.documentElement.clientWidth ==> 可见区域宽度  
document.documentElement.clientHeight ==> 可见区域高度

我开始用获取body的高度时候始终都是0 原因是因为绝对定位不能将父容器撑开 产生了BFC 解决办法。。。。还不知道  留个疑惑吧

转载于:https://www.cnblogs.com/ruogu/p/10812435.html

[797834-20190505103055146-1584175827.png]: https://img2018.cnblogs.com/blog/797834/201905/797834-20190505103055146-1584175827.png
[797834-20190505103033054-173604000.png]: https://img2018.cnblogs.com/blog/797834/201905/797834-20190505103033054-173604000.png
[797834-20190505103005516-2095769387.png]: https://img2018.cnblogs.com/blog/797834/201905/797834-20190505103005516-2095769387.png

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript 简单的瀑布流

刚开始接触js，就想写写经典的瀑布流，搜了下网上的教程，发现大多是用jquery写的，非常简单，用它也不用考虑兼容性的问题（jquery已经考虑到了），就想自己用原生的js写个

﹏ヽ暗。殇╰゛Y/ 2024年02月17日 15:16/ 0 赞/ 65 阅读

相关 JavaScript—瀑布流

现在网页中需要翻页的列表，好多都已经改为瀑布流了。所以这个思路还是特别重要的 HTML ![797834-20190505103055146-158417582

ゝ一纸荒年。/ 2023年10月11日 13:16/ 0 赞/ 6 阅读

相关 JavaScript||瀑布流实例

前言基于前面的瀑布流知识背景，今天就来用具体实例玩一下（其实也是Ajax的巩固）。最终效果浏览： ![在这里插入图片描述][watermark_type_Zm

浅浅的花香味﹌/ 2023年03月13日 09:25/ 0 赞/ 69 阅读

相关使用JavaScript实现简单的瀑布流

效果截图 ![SouthEast][] 基本思路每行展示固定数目的图片（假设为5），第一行从左至右依次展示5张图片，第6张放在前5张中高度最小的那张下方，

我不是女神ヾ/ 2022年06月01日 06:26/ 0 赞/ 203 阅读

相关瀑布流布局JavaScript实现

html代码 <div id="content"> <!-- <div> <img src="img/1.jpg">

我就是我/ 2022年05月27日 12:30/ 0 赞/ 309 阅读

相关 JavaScript实现无限瀑布流

![70][] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

超、凢脫俗/ 2022年05月17日 11:14/ 0 赞/ 300 阅读

相关 CSS3&JavaScript 瀑布流

实现方法概述 html页面要实现瀑布流，目前有两种方案，它们的适用场景不同 CSS3 的 column-count（适用于所有元素一次性加载，页面更新用分页来实现

我会带着你远行/ 2022年04月13日 07:44/ 0 赞/ 366 阅读

相关瀑布流

什么是瀑布流? 演示效果点[这里][Link 1]。瀑布流呢,可以有多列,每一个item(单元格)的高度可以不相同,但是宽度必须一样.排列的方式是,从左往右排列,哪

今天药忘吃喽~/ 2022年03月24日 21:16/ 0 赞/ 315 阅读

相关瀑布流

瀑布流经过几经波折终于完成，完了就总结一下，可以帮助更多的人。（具体瀑布流布局，可百度jquery-masonry.js） 1>>首先就是一个窗口的滚动条是否接近页面底部的一

你的名字/ 2022年03月20日 03:40/ 0 赞/ 322 阅读

相关 JavaScript 如何实现横向瀑布流

JavaScript 如何实现横向瀑布流最近在做一个小程序项目，在 UI 上借鉴了一下其他 App 设计，其中有一个图片横向布局铺满的 UI 感觉挺好看的，类似于传统的...

小灰灰/ 2020年06月03日 13:02/ 0 赞/ 750 阅读