[JS] 瀑布流加载

<!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] 瀑布流加载的更多相关文章

js图片加载效果（延迟加载+瀑布流加载）
概述两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果详细代码下载:http://www.demodash ...
js实现瀑布流加载图片效果
今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...
WAP用户评论简单实现瀑布流加载
wap端经常会遇到产品或者评论的加载,但是分页的体验不是很好,所以选择通过js实现瀑布流加载方式. 第一步:需要动态加载的主要内容,这里需要动态加载的是li标签的内容 <ul class=&qu ...
css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多主意事项
首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...
原声JS瀑布流加延迟载入
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
jQuery ajax瀑布流加载静态的列表页面
1.加载一行数据 <script> //滚动加载事件 var Loadurl = "{$url}"; if(window.location.href !== Loadu ...
Vue.js中滚动条加载更多数据
本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析:1.需要判断滚动条是否到底部: 需要用到DOM的三个属性值,即scrollTop.cl ...
面向对象js瀑布流效果
index.html <!doctype html><html lang="en"> <head> <!--网站编码格式,UTF-8 国 ...

随机推荐

Kubernetes集群的安装部署
此文参照https://www.cnblogs.com/zhenyuyaodidiao/p/6500830.html,并根据实操过程略作修改. 1.环境介绍及准备: 1.1 物理机操作系统物理机操作 ...
go_gc
如果想知道当前的内存状态,可以使用: // fmt.Printf("%d\n", runtime.MemStats.Alloc/1024) // 此处代码在 Go 1.5.1下不再 ...
java关于密码的加密解密
密码的加密方法有多种,常见的为Aes.Md5 Aes加密,可逆. 其中,Md5加密是采用了散列算法,也就是哈希算法,可以进行多次散列加密.Md5加密是不可逆的,无法解密. MD5是不可逆的单向加密方式 ...
查看linux中某个端口（port）是否被占用
1.使用lsof lsof -i:端口号查看某个端口是否被占用 2.使用netstat 使用netstat -anp|grep 80
FineUI学习
1.无限级菜单绑定 using (DataTable dt = SqlPagerHelper.GetTableByCondition(DefaultConnection.ConnectionStrin ...
linux curl网络库的使用方法
struct V3MemoryStruct { char *memory; size_t size; }; static size_t WriteMemoryCallback(void *conten ...
setitemdata 32位 or 64位
我用SetItemData 和GetItemData把数据库一条数据导入到CListctrl 32位下程序都可以跑 GetItemData能得到自定义类数据可以64位得不到?
Mosquitto服务器的搭建以及SSL/TLS安全通信配置
Mosquitto服务器的搭建以及SSL/TLS安全通信配置摘自:https://segmentfault.com/a/1190000005079300 openhab raspberry-pi ...
knn的python代码
import heapq import random class Classifier: def __init__(self, bucketPrefix, testBucketNumber, data ...
iOS Orientation获取
[iOS Orientation获取] 1.[[UIDevice sharedInstance] orientation] 必须调用beginGeneratingDeviceOrientationNo ...

[JS] 瀑布流加载

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

随机推荐

热门专题