在好例子网，分享、交流、成长！
您当前所在位置：首页 → js 开发实例 → 常用JavaScript方法 → JS实现瀑布流案例

JS实现瀑布流案例

常用JavaScript方法

下载此实例
  • 开发语言：js
  • 实例大小：0.63M
  • 下载次数：11
  • 浏览次数：115
  • 发布时间：2021-04-02
  • 实例类别：常用JavaScript方法
  • 发 布 人：0101小白
  • 文件格式：.zip
  • 所需积分：2
 相关标签： json js
网友评论 举报投诉 收藏该页

实例介绍

【实例简介】

该项目是基于js和json实现的一个简单的懒加载瀑布流案例

【实例截图】

from clipboard

【核心代码】


 //构建瀑布
        function createWaterFall() {
            //求出一行能放多少张图片

            //拿到所有的小div
            var inDivs = document.querySelectorAll('.in');

            //得到视口的宽度
            var viewportWidth = document.documentElement.clientWidth || document.body.clientWidth;

            //拿到一个图片的宽度
            var oneWidth = inDivs[0].offsetWidth;

            //拿到一个视口中一行所能放的图片的个数
            var num = Math.floor(viewportWidth / oneWidth);

            //得到最外层div的宽度
            outDiv.style.width = num * oneWidth   "px";

            //
            var heightArr = [];

            //对每一张图片设置定位，构建瀑布流
            for (var j = 0; j < inDivs.length; j ) {
                if (j < num) {
                    //如果是第一行图片则不需要设置定位 但是需要保存高度
                    heightArr.push(inDivs[j].offsetHeight);
                } else {
                    //如果不是第一行图片，则需要设置定位。根据第一行设置定位
                    inDivs[j].style.position = 'absolute';

                    //在高度数组中找到最小高度【当做这张图片的top定位值】
                    var minHeight = Math.min.apply(num, heightArr);

                    //在高度数组中，找到最小高度的下标
                    var minIndex = heightArr.indexOf(minHeight);

                    //根据找到的下标，然后找到这个最小的div，并获取它的左定位[定位的left值]
                    var tempLeft = inDivs[minIndex].offsetLeft;

                    //设置图片的定位
                    inDivs[j].style.top = minHeight   'px';
                    inDivs[j].style.left = tempLeft   'px';

                    //将高度数组中最小的高度累加到当前图片的高中上
                    heightArr[minIndex] = heightArr[minIndex]   inDivs[j].offsetHeight;
                }
            }
        }

        addDiv_inOut();

        //当页面加载完毕后在执行其他操作
        window.onload = function() {
            createWaterFall();
        }

        //
        function judgeMethod() {
            // 页面滚动的距离
            var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;

            //屏幕的距离
            var screenClient = document.documentElement.clientHeight;
            var inDivs = document.querySelectorAll('.in');
            var lastDivHeight = inDivs[inDivs.length - 1].offsetTop;
            if (scrollHeight   screenClient > lastDivHeight) {
                return true;
            }
        }

【源码目录】

瀑布流案例

├── css
│   ├── index.css
│   └── initialize.css
├── img
│   ├── i1.jpg
│   ├── i10.jpg
│   ├── i11.jpg
│   ├── i12.jpg
│   ├── i13.jpg
│   ├── i14.jpg
│   ├── i15.jpg
│   ├── i2.jpg
│   ├── i3.jpg
│   ├── i4.jpg
│   ├── i5.jpg
│   ├── i6.jpg
│   ├── i7.jpg
│   ├── i8.jpg
│   └── i9.jpg
└── index.html

2 directories, 18 files



标签： json js

实例下载地址

JS实现瀑布流案例

不能下载？内容有错？ 点击这里报错 + 投诉 + 提问

好例子网口号：伸出你的我的手 — 分享！

相关软件

相关文章

网友评论

我要评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警