JS 瀑布流效果

JS瀑布流效果

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>JS瀑布流效果</title>

    <style>

        * {

            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;

            }

    </style>

</head>

<body>

    <div id="container">

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>

    </div>

    <script>

        window.onload = function () {

            imgLocation("container", "box");

            var imgData = {

                "data": [{ "src": "1.jpg" }, { "src": "2.jpg" }, { "src": "3.jpg" }, { "src": "4.jpg" }, { "src": "5.jpg" },

                { "src": "6.jpg" }, { "src": "7.jpg" }, { "src": "8.jpg" }, { "src": "9.jpg" }, { "src": "10.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 = "/Scripts/img/img1/" + 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;

            console.log(lastContentHeight + " " + scrollTop + " " + pageHeight);

            if (lastContentHeight < scrollTop + pageHeight) {

                return true;

            }

        }

        function imgLocation(parent, content) {

            //将parent下的所有的content全部取出

            var cparent = document.getElementById(parent);

            var ccontent = getChildElement(cparent, content);

            console.log(ccontent);

            var imgWidth = ccontent[0].offsetWidth;

            var num = Math.floor(document.documentElement.clientWidth / imgWidth);

            cparent.style.cssText = "width:" + imgWidth * num + "px;margin:0px auto;";

            var boxHeightArr = [];

            for (var i = 0; i < ccontent.length; i++) {

                if (i < num) {

                    boxHeightArr[i] = ccontent[i].offsetHeight;

                    console.log(boxHeightArr[i]);

                }

                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 allConnect = parent.getElementsByTagName("*");

            for (var i = 0; i < allConnect.length; i++) {

                if (allConnect[i].className == content) {

                    contentArr.push(allConnect[i]);

                }

            }

            return contentArr;

        }

    </script>

</body>

</html>

JS 瀑布流效果的更多相关文章

面向对象js瀑布流效果
index.html <!doctype html><html lang="en"> <head> <!--网站编码格式,UTF-8 国 ...
JS瀑布流效果
本篇内容实现类似百度图片的呈现功能,瀑布流+自动加载 index13.html <!DOCTYPE html> <html> <head> <meta cha ...
手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现什么是瀑布流效果首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
利用JS实现简单的瀑布流效果
哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...
js图片瀑布流效果
要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...
js 实现图片瀑布流效果，可更改配置参数带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果页面需求 1 ...
使用JS实现图片展示瀑布流效果
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...
WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...
用jQuery实现瀑布流效果学习笔记
jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

随机推荐

（爬虫）随机生成一个header
#!/usr/bin/env python #-*- coding: utf-8 -*- #__Author__: yunrui #__Version__: 1.0 #__Time__: 2019/1 ...
6_9 天平（UVa839）<二叉树的DFS>
前一个ubiquous通信小工具,移动只是一个由弦和电线组成的结构五彩缤纷的东西.这种移动通常被发现悬挂在小婴儿的摇篮.图说明了一个简单的移动.它只是一个电线,悬挂的一个字符串,每一个对象的对象.它可 ...
PyCharm安装及汉化设置为中文（附汉化包）
下载:https://www.jetbrains.com/pycharm/download/#section=windows 下载社区版免费双击运行安装程序 Next 选择安装路径安装创建桌面快捷 ...
thinkphp 3.2链接Oracle数据库，查询数据
ennnn,换工作了,开始用新的东西了,最近就是调用nc接口,数据库是Oracle,首先先把数据查出来,这个比较简单. 在网上看的其他的方法都是改数据库配置文件,然后需要修改tp核心的一个类文件,比较 ...
对象的上转型和下转型 (instanceof关键字)
1.对象的上转型,就是多态的一种写法格式:父类名称对象名 = new 子类名称(): Animal animal = new Cat(); 含义:右侧创建一个子类对象,把它当作父类来使用向上转型 ...
基于springboot实现轮询线程自动执行任务
本文使用: Timer:这是java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务.使用这种方式可以让你的程序按照某一个频度执行,但不能在指定时 ...
css 中 max-width 和 min-width 的区别
max-width:规定元素本身最大宽度,即元素本身 (该div) 的宽度应小于等于其最大宽度值. min-width:规定元素本身最小宽度,即元素本身应大于等于其宽度值. 例:min-width:1 ...
ZOJ 1002 Fire Net（dfs）
嗯... 题目链接:https://zoj.pintia.cn/problem-sets/91827364500/problems/91827364501 这道题是想出来则是一道很简单的dfs: 将一 ...
mybatis实现有则更新无则插入
<insert id="insertUser" useGeneratedKeys="true" keyProperty="id" ke ...
mvn 搭建临时仓库批量下载依赖jar包
1.新建文件夹temp,在temp下新建setup.bat ,pom.xml 2.编辑setup.bat 和pom.xml bsetup.bat call mvn -f pom.xml depende ...

JS 瀑布流效果

JS 瀑布流效果的更多相关文章

随机推荐

热门专题