<!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. k8s gpu 资源设置

    将所有相同型号显卡的node打上 相同的label kubectl label node ogs-gpu02 gpu_type=k20m 启动device plugin 和app 时: nodeSel ...

  2. Codeforces Beta Round #9 (Div. 2 Only) D. How many trees? dp

    D. How many trees? 题目连接: http://www.codeforces.com/contest/9/problem/D Description In one very old t ...

  3. loadrunner--步长（Pacing）的设置及作用

    Pacing时间的设置需要根据使用您系统的用户的行为来决定. 如果您那边的用户在您的系统上做完一套操作后不会做下一套,则可能不需使用Pacing. 如果您那边用户在系统上需要不断地做同样的操作,比如他 ...

  4. [Selenium]Release in dragAndDrop doesn't work after i update the version of Selenium to 2.45.0

    在升级Selenium的版本之前,写了一段拖拽的代码,Drag and Drop 都好使的, 但是,将Selenium的版本升级到2.45.0之后,图标拖拽可以成功,释放不生效. 试了N多种解决方案都 ...

  5. iOS界面设计，12个优秀案例激发你的灵感

    总所周知,iOS和Android是当今两大移动平台,前者采用Human Interface Design,后者采用Material Design.作为设计师,尤其是App设计师,总是会在这两者进行设计 ...

  6. 14 Finding a Shared Motif

    Problem A common substring of a collection of strings is a substring of every member of the collecti ...

  7. 购买阿里云的云服务器时选择镜像centos时应该选择哪个版本

    购买阿里云的云服务器时选择镜像centos时应该选择哪个版本 方法/步骤首先,我们要清楚的便是每个系统之间的差别,以及在阿里云上的差别:1. Windows1.1) 系统内含正版激活.1.2) 适合于 ...

  8. tp5 根据经纬度计算门店距离 可排序

    $branchInfo=Db::name('Branch')->where('b_id','250')->find(); $map['p.cate_id']=array('eq',5); ...

  9. windows7 不能更新,提示:"WindowsUpdate_80240016" "WindowsUpdate_dt000",如何解决？

    计算机(右键) ---- 管理 -------- 服务和应用程序 -----服务(找到名称为windows update的服务,并且在windwos update服务右键 选择重新启动 ) 再次安装更 ...

  10. Apps: Help > Diagnostics > Custom Code > Personalize 查看LOV中的查询语句

    Apps Menu Path: Help > Diagnostics > Custom Code > Personalize 查看LOV中的查询语句   一直有实施顾问询问我XXFo ...