对于瀑布流回顾

@(当然可以直接使用插件,但是这个有助于你更深的理解瀑布流)
1,应用ajax请求,
2.模板引擎的渲染,(对于字符串的拼接,短的还行,长的字符串拼接容易出错);
3.jquery

一:客户端:
html页面:

<div class="box">

</div>
<div class="btn">加载更多</div>

在后面添加文件;

      <!-- 引入模板 -->
 <script type="text/html" id="waterFallList">
    
   {{ each items v i}}
    
      <div class="item">
         <img src="{{ v.path}}" width="{{ v.width }}">
          <p>{{ v.text }}</p>
        </div>
   {{ /each}}

js代码

  function waterFall() {
       
        //需求:把第一行的盒子(item ),布局完成(一行五个)
        //1. 获取页面的所有的item 
        var $items = $('.item');
        //获取box 的宽度,获取item 的宽度,计算间隔的宽度;
        var $box = $('.box');
        var boxWith = $box.width();
        var itemWith = $items.width();
        //计算间隔
        var gap = (boxWith - itemWith * 5) / 4;
        //数组,存储每一列的高度
        var arr = [0, 0, 0, 0, 0];
        //给第一行的item 设置leff 和 top 值
        $items.each(function (index, item) {//item 为dom对象
          
            //找到最矮的那一列
            var min = arr[0];

            var minIndex = 0;
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] < min) {
                    min = arr[i];
                    minIndex = i;

                }

            }
            //  console.log(min,minIndex);
            //给新的盒子设置left 和top 
            $(item).css({
                //原来的高度+间隔(min + gap)
                top: min + gap,
                left: minIndex * (itemWith + gap)
            })
            //对应的那一列发生变化,给数组重新赋值
            // 原来的高度 + 新的盒子的高度 + 间隔
            arr[minIndex] = min + $(item).height() + gap;
            //  console.log($(item));

            //  }
          var max = Math.max.apply(null, arr);
        console.log(max);
        $box.height(max);

        })

发送ajajx 请求获取数据

var page = 1; //页码
        $('.btn').on('click', function () {
            //不能重复发送请求
            if ($('.btn').hasClass('loading')) {
                return;
            }
            //修改文本,去掉背景色
            $('.btn').text('正在加载....').addClass('loading');

        //请求
        $.ajax({
            url: 'data.php',
            type: 'get',
            data: {
                page: page,
                pageSize: 10
            },
            dataType: 'json',
            success: function (res) {

             // 只需要判断res.items这个属性对应的数组的长度是否为0 
				// 如果时0代表,没有数据了,后面的代码不执行,然后,提示用户,并且不能发送请求了
				if(res.items.length == 0){
					$('.btn').text('亲, 没有数据了...')
					return;
				}

                // 给page赋值,下一次点击获取下一页的数据
                page = res.page;
                // console.log(res);

                var htmlstr = template('waterFallList', res);

                // console.log(htmlstr);
                //html字符串,添加到页面之后,浏览器重新渲染,发现有img标签,要发送请求,获取图片,这个图片的请求是异步的
                $('.box').append(htmlstr);

               waterFall();
                //恢复按钮
                $('.btn').text('加载更多').removeClass('loading');
            }
        })
    })

给浏览器注册滚动,当最后一个盒子到可视区的时候,发送ajax请求数据;

$('.btn').trigger('click');
        $(window).on('scroll',function(){
                 //获取浏览器可视区的高度
                 var clientH = $(window).height();
                 //获取最后一个盒子的距离父元素顶部的高度
                 var itemH = $('.item:last-child').offset().top;
                 //页面滚动的距离
                 var scrollH = $(window).scrollTop();


             //实时获取高度,判断是否需要获取数据
             //浏览器的可视区的高度+页面滚动的距离 是否待遇最后一个子盒子到父盒子顶部的高度
             if(clientH+scrollH > itemH){
                 //符合条件就获取新的数据,进行渲染页面
                 $('.btn').trigger('click');
             }

    })

2.服务器那边就不写了,就是简单的获取数据,输出到前台;

猜你喜欢