瀑布流-滚动-延时加载图片内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
       *{margin: 0; padding: 0; font-size: 12px;}
       #container{
           padding: 10px;
           margin: 0 auto;
       }
       #container>div{
           position: relative;
       }
       .imageView{
           border: 1px solid black;
           position: absolute;
           padding: 5px 2px;
           text-align: center;
           box-sizing: border-box;   //添加box-sizing 是为了使前面添加padding的数值使窗口保持原来的大小
       }
       .load-more{
           text-align: center;
       }
       .load-more span{
        display: inline-block;
        cursor: pointer;
       }
       .title{
           font-weight: bold;
           font-size: 14px;
       }
       .content{
           font-style: italic;
           height: 30px;
           line-height: 30px;
       }
       .author{
           text-align: right;
           padding-right: 5px;
       }
    </style>
</head>
<body>
<div id="container">
<div class="image-container"></div>
<p class="load-more"><span>加载更多</span></p>
</div>
</body>
<script src="js/jquery.min-1.12.4.js"></script>
<script src="js/template-web.js"></script>

<!--页面模板开始-->
<script id="imageView" type="text/html">
<% for(var i = 0;i<data.length;i++){ %>
<div class="imageView">
<!--lazy-load是一个自定义的属性名称,用于保存图片的地址-->
<div><img src="" lazy-load="http://172.17.12.10:8080/webserver/images/<%=data[i].name%>" width="<%=data[i].width%>" height="<%=data[i].height%>"/></div>  // IP地址可以改成你需要的
<div class="title"><%=data[i].title%></div>
<div class="content"><%=data[i].content%></div>
<div class="author"><%=data[i].author%></div>
</div>
<% } %>
</script>
<!--页面模板结束-->

<script>
/*
       在第一行按顺序排好所有的图片(每张图片宽度一样,高度不一样),以五张图片为例
       从第二开始,从五列当中找出高度最小的一列,把新的图片加在这列上,然后列的的
       高度需要加上新图片的高度。重复这个过程
      */


    // 加载获取图片数据
    /*
        http://172.17.12.10:8080/webserver/image?p=1&s=10
        p           页面码
        s           每页获取到的记录数量
     */
    
    var page = 1;     //页码
    var size = 30;    //每次获取到的数据      图片数
    
   function loadData(){
  $.ajax({
       url: 'http://172.17.12.10:8080/webserver/image',  //写存图片的IP地址
       data: {p:page, s:size},
       type: 'get',
       dataType: 'jsonp',
       success: function(data){
           if (data.statusCode == 0) { // 检查服务器返回的状态码是否为正确的状态码
               appendImageViewsToDOM(data);
               
               
           }else{
               alert('获取的数据异常');
           }
       },
       error: function(error){
           console.log('连接服务器出现异常');
       }
   });
    }
    
    /**
     * 把获取到数据生成节点并添加到DOM树中
     * @param data        获取到图片数据数组
     * */
    
    function appendImageViewsToDOM(data){
    //使用模板生成标签字符串数据
    var html = template('imageView',data);
    //将字符串追加到图片节点中
    var container = $('.image-container');
    container.html(container.html() + html);
    resize();
    }
    
    
    //获取容器的宽度
    var contaninerWidth = $('#container').width();
    //保存每一列的高度
    var heights;
    /**
     * 对所有的图片进行位置的定位
     * */
    
    function resize(){
    var views = $('.imageView');     //获取所有图片所有div
    //获取第一个view的宽度,后面所有的view的宽度以这个作为标准
    var viewWidth = views[0].offsetWidth;
    //计算每一行能放多少个view
    var cols =Math.floor(contaninerWidth / viewWidth);
    heights= [];
   
    var tmp,left;              //如果在循环里声明,当 循环结束时会被回收,下次循环又会重
      //新创建,所以在外面声明可以减少这个过程,提高效率
  for(var i = 0;i<views.length;i++){     //获取每个view对位置进行设置
  tmp = views[i];
 
  //对前clos个view的位置进行摆放
  if(i<cols){
  left = viewWidth * i + 12 * i;
  $(tmp).css({
  'top':0,
  'left':left + 'px',
  'width':viewWidth + 'px'
  });
  heights.push(tmp.offsetHeight);
  }else{
  //处理除了第一行以外的其他view
  var minPos = getMiniHeight();
  left = viewWidth * minPos + 12 * minPos;
  $(tmp).css({
                    'top': heights[minPos] + 6 + 'px',
                    'left': left + 'px',
                    'width': viewWidth + 'px'
                });
                //把当前列的高度修改
                heights[minPos] += tmp.offsetHeight + 10;
  }
  }
  //修改图片容器的高度
  $('.image-container').css('height',heights[getMaxHeight()]);
  //修改整个容器的宽度
  var lastView = views[cols-1];//cols是每行能够显示的最大图片数量,获取每行最后一个图片需要减1
  var width = lastView.offsetLeft + lastView.offsetWidth;
  $('#container').css('width',width + 'px');
    }
    /*
     * 获取高度最小的下标
     */
    function getMiniHeight(){
    var min = 0;   //假设第一个下标是最小的
    for(var i = 1;i<heights.length;i++){
    if(heights[min] > heights[i]){
    min = i;
    }
    }
    return min;
    }
    
    /*
     * 获取高度最大的下标
     */
    
    function getMaxHeight(){
    var min = 0;   //假设第一个下标是最小的
    for(var i = 1;i<heights.length;i++){
    if(heights[min] < heights[i]){
    min = i;
    }
    }
    return min;
    }
    
    //可要可不要
    //添加点击事件,加载更多的数据
    $('.load-more span').on('click',function(){
    page++;
    loadData();
    });
    loadData();
    
    
    //添加滚动事件,监听是否滚动离底部小于100px
    $(window).on('scroll',function(){
    //整个body的高度
    var bodyHeight = document.body.offsetHeight;
    //可视部分距离顶部的高度
    var scrollTop = document.documentElement.scrollTop;
    //屏幕的高度
    var screenHeight = document.documentElement.clientHeight;
    //距离底部高度
    var distance = screenHeight / 2;
    if(bodyHeight - scrollTop - screenHeight <= distance){
    page++;
    loadData();
    }
    showLazyLoadImages();
    });
    
    
    /*
     * 加载延时显示的图片内容
     */
    
    function showLazyLoadImages(){
    //可视部分距离顶部的高度
    var scrollTop = document.documentElement.scrollTop;
    //屏幕的高度
    var screenHeight = document.documentElement.clientHeight;
    //读取延时加载的图片
    var imgs = $('.imageView img');
    var tmp;
   
    for(var i = 0;i<imgs.length;i++){
    tmp = imgs[i];
    //判断图片的top是否小于scrollTop+clientHeight
    //优化:避免再次加载图片,还要判断<img/>有没有lazy-load属性
    //减500目的是看清楚加载图片的过程
    if($(tmp).attr('lazy-load') && $(tmp).offset().top < scrollTop + screenHeight -500){
    //加载图片,就是把lazy-load的内容赋值给src
    $(tmp).attr('src',$(tmp).attr('lazy-load'));
    //删除lazy-load属性                                                                                                     
    $(tmp).removeAttr('lazy-load');
    }
    }
    }
</script>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值