<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="keywords" content="">

        <meta name="description" content="">

        <title></title>

        <script type="text/javascript" src="jQuery/jquery-3.1.1.min.js" ></script>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            #box{

                width: 1000px;

                height: 500px;

                margin: 0 auto;

            }

            #box ul li{

                float: left;

                list-style: none;

                width: 225px;

                padding: 5px;

                margin: 5px;

                box-shadow: 0px 0px 5px #333;

            }

            #box ul li .pic{

                border: 1px solid #ddd;

                margin-bottom: 10px;

            }

            #box ul li img{

                width: 100%;

                height: 100%;

                display: block;

                transition: 1s;

                -webkit-transition: 1s;

            }

        </style>

    </head>

    <body>

        <div id="box">

            <ul>

                <li>

                </li>

                <li>

                </li>

                <li>

                </li>

                <li>

                </li>

            </ul>

        </div>

    </body>

</html>

<script type="text/javascript">

    /*

     企业开发流程

     1.需求分析

     2.生成需求文档

     3.标准开发文档

         （架构师 ，项目经理）

     4.程序员最底层的工作（码农）

     分析原理：

     1.动态生成图片标签，添加到li里面

         1.获取高度最小的li，

         2.循环动态添加多个图片

         3.判断滚动条的高度，动态添加

     * */

    var $li = $('#box ul li');

    var liLength = $li.length;

    var i=0;

    var sum=0;

    var arr = [

        {src:'img/pic1.jpg'},

        {src:'img/pic2.jpg'},

        {src:'img/pic3.jpg'},

        {src:'img/pic4.jpg'},

        {src:'img/pic5.jpg'},

        {src:'img/pic6.jpg'},

        {src:'img/pic7.jpg'},

        {src:'img/pic1.jpg'},

        {src:'img/pic2.jpg'},

        {src:'img/pic3.jpg'},

        {src:'img/pic4.jpg'},

        {src:'img/pic5.jpg'},

        {src:'img/pic4.jpg'},

        {src:'img/pic5.jpg'},

        {src:'img/pic4.jpg'},

        {src:'img/pic5.jpg'}

    ];

    function create(){

        var oDiv = document.createElement('div');

        oDiv.className = 'pic';

        var oImg = new Image();

        oImg.src = arr[i%arr.length].src;

        oImg.style.cssText = 'opacity: 0;transform: scale(0)';

        oDiv.appendChild(oImg);

        $li.eq(getList()).append(oDiv);

        //console.log(getList());

        //闭包

        (function(oImg){

            setTimeout(function(){

                oImg.style.cssText = 'opacity: 1;transform: scale(1)';

            },100);

        })(oImg);

    }

    //获取高度最小的li

    function getList(){

        var a = 0;

        var fH = $li.eq(0).height();//获取第一个li的高度

        for(var j=0;j<liLength;j++){

            var nH = $li.eq(j).height();//得到对应的li的高度

            if(nH<fH){

                a = j;//更新最短的索引

                fH = nH;//更新最短的高度

            }

        }

        return a;

    }

    create();

    //循环动态添加图片，如果i<16,添加12张，如果i>16，每次动态添加3张

    function upload(){

        i++;

        if(i<16){//初始化12张图片

            for (; i < 16; i++) {

                create();

            }

        }else{

            sum = i;//在16张图片的基础上添加

            console.log(sum);

            for (;i<sum+4;i++) {

                create();

            }

        }

    }

    upload();

    //判断滚动条的高度，然后动态添加

    //可视区域的高度+滚动高度>文档高度

    var scrollH = '';//文档高度

    var scrollT = '';//滚动条高度

    $(function(){//当页面加载的时候

        var _height = $(window).height();//可视区域的高度

        $(window).scroll(function(){//滚动条事件

            scrollH = document.body.scrollHeight;//文档高度

            scrollT = $(window).scrollTop();//滚动条高度

            if(_height+scrollT+50>scrollH){

                console.log(_height+"--"+scrollT+"--"+scrollH);

                upload();

            }

        });

    });

</script>

[JS] 瀑布流加载的更多相关文章

  1. js图片加载效果（延迟加载+瀑布流加载）

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  2. js实现瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...

  3. WAP用户评论简单实现瀑布流加载

    wap端经常会遇到产品或者评论的加载,但是分页的体验不是很好,所以选择通过js实现瀑布流加载方式. 第一步:需要动态加载的主要内容,这里需要动态加载的是li标签的内容 <ul class=&qu ...

  4. css3多列布局瀑布流加载样式

    看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...

  5. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

  6. 原声JS瀑布流加延迟载入

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jQuery ajax瀑布流加载静态的列表页面

    1.加载一行数据 <script> //滚动加载事件 var Loadurl = "{$url}"; if(window.location.href !== Loadu ...

  8. Vue.js中滚动条加载更多数据

    本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析:1.需要判断滚动条是否到底部: 需要用到DOM的三个属性值,即scrollTop.cl ...

  9. 面向对象js瀑布流效果

    index.html <!doctype html><html lang="en"> <head>  <!--网站编码格式,UTF-8 国 ...

随机推荐

  1. js小例子之二级联动

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

  2. 用jquery实现html5的placeholder功能

    html5的placeholder功能在表单中经常用到,它主要用来提示用户输入信息,当用户点击该输入框之后,提示文字会自动消失. 我们用jquery实现类似的功能: 当输入框获得焦点时,清空输入框中的 ...

  3. 1-vim的复制粘贴

    一. http://blog.csdn.net/hk2291976/article/details/42196559 二. "+y"+p---------------------- ...

  4. 微软AntiXSS防止xss攻击类库

    AntiXSS,由微软推出的用于防止XSS攻击的一个类库,可实现输入白名单机制和输出转义. AntiXSS最新版的下载地址:http://wpl.codeplex.com 下载安装之后,安装目录下有以 ...

  5. cocos2dx中使用tolua++使lua调用c++函数

    一直想学学cocos2dx中如何使用tolua++工具使得lua脚本调用C++函数,今天就来搞一下,顺便记录下来: 首先,我们打开cocos2dx-2.2.4中projects下的test的VS工程, ...

  6. 第六章 Windows应用程序对键盘与鼠标的响应

  7. [Training Video - 1] [Selenium Basics] [Xpath Selenium]

    FirePath Press F12, you will see :

  8. .net分布在指定文件夹的web.confgi或者app.config

    .Net里面,ConfigurationManager默认读取的是Web.config或者App.config但是,什么都放在这两个文件里面,感觉太多了,也不好管理配置.于是参考了下别人的资料,自己写 ...

  9. ubuntu系统中解决github下载速度慢问题

    如果你在使用github,出现访问和下载速度慢问题,可以通过修改host解决.记得不要踩坑哦!分四步: 第一步:查询速度快的IP地址 在http://tool.chinaz.com/dns中查询下面三 ...

  10. 为iOS项目添加Daily Build

    很多人在说到Daily Build的时候总是喜欢背书.背书就背书吧,总比混迹软件行业连书都没看过的强.很久以前遇到一个奇葩.每次到代码提交测的通知就着急忙慌的催促组员赶紧干活,开始严重加班,晚饭都不吃 ...