<!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. 基于python的Appium自动化测试的坑

    真的感谢@虫师 这位来自互联网的老师,让我这个原本对代码胆怯且迷惑的人开始学习自动化测试. 一开始搜索自动化测试的时候,虫师的博客园教程都是在百度的前几位的,我就跟着虫师博客园里面的教程学习.后来学s ...

  2. qt学习(一) qt安装

    QT5现在安装已经方便了许多 相比QT4 可以一路点击到底 无需额外的太多的操作. http://download.qt.io/official_releases/ 下载 1 windows下可以选择 ...

  3. CMAKE 教程前两章节学习

    原文 https://cmake.org/cmake-tutorial/ 以下是一个循序渐进的教程,它覆盖了CMAKE帮助改进的通常的构建系统的话题.许多话题在<掌握CMAKE>(< ...

  4. max文件属性设置，

    之前一直都没找到 用到的时候就是用net 弄了.哎.还在开发东西都是在9上面, 这次脚本必须在 max8 上面 逼的我找到了他 getFileAttribute <filename_string ...

  5. http://www.atool.org/keytype.php#0-tsina-1-53371-397232819ff9a47a7b7e80a40613cfe1

    http://www.atool.org/keytype.php#0-tsina-1-53371-397232819ff9a47a7b7e80a40613cfe1

  6. 如何用Python实现常见机器学习算法-4

    四.SVM支持向量机 1.代价函数 在逻辑回归中,我们的代价为: 其中: 如图所示,如果y=1,cost代价函数如图所示 我们想让,即z>>0,这样的话cost代价函数才会趋于最小(这正是 ...

  7. docker+zookeeper+mesos+marathon集群

    实验环境: 主机名 ip地址 运行服务 安装组件 docker-master1 192.168.20.210 zookeepermesos-mastermarathon mesosmarathonme ...

  8. SOAP与REST比较(转)

    出处:http://xiaobaila.blog.163.com/blog/static/189705129201141965434571/ SOAP与REST比较 如今,Web开发者的可选技术相当之 ...

  9. maven pom.xml中的 build说明

    在Maven的pom.xml文件中,Build相关配置包含两个部分,一个是<build>,另一个是<reporting>,这里我们只介绍<build>. 1. 在M ...

  10. word 2007 写CSDN博客

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...