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代码.神奇的让我来把 ...

随机推荐

8.5-Day1T1--Asm.Def 谈笑风生
题目大意 m个操作, 1:添加一个字符串 2:查询字符串s是否被添加过(中至多包含一个通配符“*”) 题解 trie树可以得部分分用map映射 '*'就枚举26个英文字母来判断就可以了 #inclu ...
window下进程退出后自动重启
设计思想:编写批处理脚本监控进程的运行状态,如果发现进程停止,则自动重启该进程.批处理脚本(jk.bat)和进程脚本(hello.bat)如下: 1.jk.bat @echo off rem 定义需监 ...
Ubuntu16 nginx 配置 Let's Encrypt 免费ssl
每篇一句 Some of us get dipped in flat, some in satin, some in gloss. But every once in a while you find ...
推荐 C/C++ 人工智能框架和库
2018年10月22日 22:59:58 yangminggg 阅读数:2217 值得推荐的C/C++框架和库 C++资源大全关于 C++ 框架.库和资源的一些汇总列表,内容包括:标准库.Web ...
Java web 会话技术 cookie与session
一.会话会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 会话过程中要解决的一些问题每个用户在使用浏览器与服务器进行会话的过程 ...
POJ 3041 Asteroids（二分图 && 匈牙利算法 && 最小点覆盖）
嗯... 题目链接:http://poj.org/problem?id=3041 这道题的思想比较奇特: 把x坐标.y坐标分别看成是二分图两边的点,如果(x,y)上有行星,则将(x,y)之间连一条边, ...
《MySQL命令执行过程和存储引擎概述》阅读笔记
使用MySQL的完整过程: 启动MySQL服务器程序. 启动MySQL客户端程序并连接到服务器程序. 在客户端程序中输入一些命令语句发送到服务器程序,服务器程序收到这些请求后,会根据请求的内容来操作具 ...
coturn服务器配置中英对比
coturn服务器配置中英对比默认配置位置 /etc/turnserver.conf # RFC5766-TURN-SERVER configuration file # RFC5766-TURN- ...
「CF891C」Envy
传送门 Luogu 解题思路考虑最小生成树的几个性质: 所有最小生成树中边权相等的边的条数相等在任意一颗最小生成树中,边权相等的边所联通的点集一定那么我们考虑把边权相等的边单独拿出来考虑. 每次 ...
最全的Java操作Redis的工具类，使用StringRedisTemplate实现，封装了对Redis五种基本类型的各种操作！
转载自:https://github.com/whvcse/RedisUtil 代码 ProtoStuffSerializerUtil.java import java.io.ByteArrayInp ...

JS 瀑布流效果

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

随机推荐

热门专题