[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>
时间: 2024-10-10 00:54:17

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

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

今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1.设定一行中的列数:2.取第一行中每一个div的高度并把每一个高度放进一个数组中:3.算出数组中最小高度的index值:4.把第二行的第一个div放到最小高度的div的下方并把重新算出的高度值放进数组中,重新计算最小高度的index值:5.以此类推实现多栏布局的瀑布流效果:6.如果最后一张div的高度

关于产品的一些思考——瀑布流加载

对网站页面的瀑布流加载已经忍受了很长时间,今天就在这里记录一下,讨论下那些令我"厌恶"的瀑布流加载. 当初好像是因为Pinterest,各大网站开始纷纷引入瀑布流加载方式,引入瀑布流仁者见仁智者见智,个人觉得还是不是很友好的(瀑布流适合图片类网站,针对文章性网站,真的不是很合适),我是可以在同一个页面看完所有相关的内容,可是我要无限地滚动鼠标,无限地点按向下箭头或者无限地点按空格键,还是觉得没有点击下一页要好,尤其是当用户看了很多内容,想回头寻找自己感兴趣的内容的时候,当然可以使用Ct

原声JS瀑布流加延迟加载

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流</title> <style> *{ margin: 0px; padding:0px; } .box{ position: relative; top:0px; } ul li{ list-style-type: none; posit

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

看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3多列属性瀑布流</title> <style> /*大层*/ .container{width:80%;margin: 0 auto;}

js自定义流加载

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePa

rwcq 瀑布流加载

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="" /><meta name="description" content="<参考消息>由新

前端模拟5页瀑布流加载

html: 1 <div id="masonry" class="container-fluid"> 2 <div class="box"><img src="../../img/test/wty1.png"></div> 3 <div class="box"><img src="../../img/test/wty2.png&qu

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

本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析:1.需要判断滚动条是否到底部: 需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离. 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + cl

面向对象js瀑布流效果

index.html <!doctype html><html lang="en"> <head>  <!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->  <meta charset="UTF-8">  <meta name="Keywords" content="">  <meta name="Descri