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

随机推荐

查看Oracle的表中有哪些索引（用user_indexes和user_ind_columns）
用user_indexes和user_ind_columns系统表查看已经存在的索引对于系统中已经存在的索引我们可以通过以下的两个系统视图(user_indexes和user_ind_columns ...
总结fiddler抓https包
把fiddler工具>选项>https>勾选所有,点击actions,导出的证书导入到浏览器(打开右上角浏览器设置>选项>高级>证书>查看证书>证书机构 ...
删除设备和驱动器中的PPS、百度云、360云盘图标
1.win+R,regedit打开注册表 2.找到 HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\MyCom ...
txt文件太大打不开怎么办
#开始最近在调试代码的时候,生成了一个400MB的日志文件找了很多文本编辑器,都表示太大了打不开 QAQ #解决方案百度下载 “txt杀手” 用这个软件把文本文件拆分成小份就可以打开了输入如图 ...
如何切换虚拟机（centos6）和windows
通过设置热键,选择Ctrl+Alt+Fx即可.重启linux之后按Ctrl+Alt+Fx切换不同的终端的就可以了图一. 图二.
【IO多路复用】
" 目录一.IO模型介绍二.阻塞IO(blocking IO) 三.非阻塞IO(non-blocking IO) 四.多路复用IO(IO multiplexing) 五.异步IO(Asy ...
【Python协程的实现】
" 补充:数据安全问题进程: 多个进程操作同一个文件,会出现数据不安全线程: 多个线程操作同一个全局变量,会出现数据不安全对于共享的数据操作: 如果是 += *= /= -= 操作,都 ...
pycharm如何关闭虚拟环境（即取消venv命令行）
venv命令行是虚拟环境特有, 为什么要使用虚拟环境: 在实际项目开发中,我们通常会根据自己的需求去下载各种相应的框架库,如Scrapy.Beautiful Soup等,但是可能每个项目使用的框架库 ...
Spring 事务管理的使用
Spring提供了2种事务管理编程式的声明式的(重点):包括xml方式.注解方式(推荐) 基于转账的demo dao层新建包com.chy.dao,包下新建接口AccountDao.实现类Acc ...
局域网内Linux下开启ftp服务的“曲折路”和命令复习
今天主要学习了Linux下网络配置以及vsftp(FTP)和samba的服务配置,学习起来,难度也就一般,并没有特别难,可是在可以做实验的时候,却并没有自己想像的那么顺利,可见,很多事情看起来不难,做 ...

JS 瀑布流效果

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

随机推荐

热门专题