<!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. java多线程启动的方法runnable和callable

  2. oracle存储过程和游标参考

    oracle open cursor forhttp://www.itpub.net/thread-1874683-1-1.html

  3. Java程序设计19——类的加载和反射-Part-B

    接下来可以随意提供一个简单的主类,该主类无须编译就可使用上面的CompileClassLoader来运行它. package chapter18; public class Hello { publi ...

  4. Jakarta Commons Cookbook

      Cookbook就是工具书,应该是前年看的,在中关村看的影印版,全英文,本书主要讲解了一下模块: Core:BeanUtils,Lang,Collections,logging Db:DbUtil ...

  5. DIV+CSS布局时， DIV的高度和宽度特性

    这个没有特别的做要求,你要根据你自己的页面整体布局来设置,还有根据div的特性来设置,div默认情况是宽度最大化(100%).高度最小化,高度随着内容自动伸展: 一般情况做网页的话,大部分都是固定了总 ...

  6. 1 web应用-http协议-web框架

    web 应用 Web 应用程序是一种可以通过 Web 访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件.应用程序有两种模式 C/S.B/S.C/S ...

  7. IE（IE6/IE7/IE8）支持HTML5标签

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  8. jmeter 性能分析 （一点点加）

    1.聚合报告 我们可以看到,通过这份报告我们就可以得到通常意义上性能测试所最关心的几个结果了. Samples -- 本次场景中一共完成了多少个Transaction Average -- 平均响应时 ...

  9. （1）-使用json所要用到的jar包下载

    json是个非常重要的数据结构,在web开发中应用十分广泛.我觉得每个人都应该好好的去研究一下json的底层实现,需要准备下面的六个jar包:commons-lang-1.0.4.jar common ...

  10. (转)JDBC模板类。

    Spring JDBC抽象框架core包提供了JDBC模板类,其中JdbcTemplate是core包的核心类,所以其他模板类都是基于它封装完成的,JDBC模板类是第一种工作模式. JdbcTempl ...