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

随机推荐

安装rpm包时提示错误：依赖检测失败的解决方法
安装rpm包时提示错误:依赖检测失败解决方法: 命令末尾加上--nodeps --force
web应用程序上传文件超过了最大请求长度
具体问题如下图具体问题描述:在web应用程序中,上传了200M的文件,出现了如上图的问题,上传较小文件的时候,没有任何的问题.但是,测试的能力,不容小觑,真真的会测试的很全面.测试到了这个问题,好吧 ...
List 线性表：ArrayLis，LinkedList
package seday11.list; import java.util.ArrayList;import java.util.List; /*** @author xingsir * java. ...
Servlt入门
Servlt入门 java的两种体系结构 C/S (客户端/服务器)体系结构通讯效率高且安全,但系统占用多 B/S (浏览器/服务器)体系结构节约开发成本 C/S (客户端/服务器)体系结 ...
Cosmetic Airless Bottles To Meet Practical Requirements
Today, people use cosmetic bottles, many of which are in cosmetic airless bottles. We can use them, ...
nested exception is org.apache.ibatis.binding.BindingException: Parameter 'cons_id' not found. Available parameters are [arg2, arg1, arg0, param3, param1, param2]
修改DAO层的类中的方法,如下所示:
php集成环境、基础标记符
集成环境:wamp windows apache mysql php lamp linux apache mysql php 标记符: 1.<?php ...... ?> 2.<?p ...
【PAT甲级】1076 Forwards on Weibo (30 分)
题意: 输入两个正整数N和L(N<=1000,L<=6),接着输入N行数据每行包括它关注人数(<=100)和关注的人的序号,接着输入一行包含一个正整数K和K个序号.输出每次询问的人发 ...
Java电子书高清PDF集合免费下载
这份资源是我经过多年积累才整理归类出来,有很多电子书我觉质量还是非常高的,由于电子书太多我也是用业余时间挑着看的,这么多资源自己保存着也是浪费,就想着现在把资源分享出来,希望能真正帮到大家: 资源我都 ...
BOSS标准版-电话收费结账明细费用sql语句
明细费用页面-所在jsp路径-:/EtcomWeb_BZvx/WebRoot/hfys/manage/telCharge/detailInfo.jsp exec Hfys_Sp_CaculCharge ...

JS 瀑布流效果

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

随机推荐

热门专题