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>

最新文章

  1. Redis百亿级Key存储方案（转）
  2. 安卓更新sdk的代理
  3. TIJ读书笔记05-this关键字
  4. 简单介绍Android应用特色及详解四大组件
  5. Linux下安装MySQLdb模块
  6. MYSQL语句中SELECT语句及其子句的执行顺序
  7. php生成excel或php生成csv
  8. CSS3中的变形处理(transform)属性
  9. FireFox浏览器的下载和安装、借助RamDisk让你的FireFox飞起来
  10. 使用ECharts报表统计公司考勤加班，大家加班多吗？
  11. 浅谈SpringMVC(一)
  12. java面向对象中的String类中12种常用的方法
  13. 201521123047 《Java学习笔记》第二周学习总结
  14. Java 核心内容相关面试题【2】
  15. django图书管理半成品（MySQL）
  16. [国嵌攻略][151][nandflash驱动程序设计]
  17. npm包使用语义化版本号
  18. 我的第一本著作：Spark技术内幕上市！
  19. 有关python2与python3中关于除的不同
  20. Java封装、继承整理

热门文章

  1. 2017年陕西省网络空间安全技术大赛——人民的名义-抓捕赵德汉2——Writeup
  2. Kali2.0中peda与pwntools的安装
  3. AC自动机讲解超详细
  4. Spring Boot 框架 - 快速创建Spring Boot应用
  5. 获取浏览器url参数
  6. django的静态文件配置和路由控制
  7. 05-Docker-Container资源限制
  8. IDEA导入maven项目不自动识别
  9. Protobuf协议--java实现
  10. python学习笔记：字符串格式化