ajax综合案例之瀑布流

瀑布流

静态的瀑布流做法是，

先固定了第一排，才能确定后面的图的放置位置。

但如果将承载着每张图的json数据动态渲染到页面中时，这种方法就不适用了，因为无法确定每个图所在的位置，无法计算哪列最矮。

动态的瀑布流做法是，

第1行：top=0，left=index*(盒子宽度+间距)，渲染的同时记录下每列的高度

后n行：找到最矮列，top=该列的高度+间距，left=该列index*(盒子宽度+间距)，并更新记录该列的高度

本方法直接给 jQuery 定义了扩展方法，命名为 WaterFall，需要提前引入 jQuery 包。

/*闭包，函数自调用，这里定义的变量不会受全局变量的影响*/
(function($){
    /*相当于给JQuery定义了一个新的插件*/
    $.fn.WaterFall = function () {
       
        /*初始化的元素，设定的是大容器*/
        var $parentBox = $(this);
        var parentWidth = $parentBox.width();//容器的宽度固定
        var $itemsBox = $parentBox.children();//所有子容器
        var itemWidth = $itemsBox.width();//子容器的宽度固定
        var col = 5;//显示多少列固定
        var space = (parentWidth - col*itemWidth)/(col-1);//间距
        /*记录每一列的高度*/
        var arrHeight = [];
        /*布局 定位*/
        $itemsBox.each(function (index,item) {
            /*每一个子容器*/
            var $item = $(item);
            /*前五个，比较特殊*/
            if(index < col){
                /*记录到arrHeight*/
                arrHeight[index] = $item.height();
                $item.css({
                    top:'0',
                    left:index*(itemWidth+space)
                });
            }
            /*其他的*/
            else {
                /*找到最矮的一列*/
                /*当前这列的高度和索引*/
                var minHeight = arrHeight[0];
                var minIndex = 0;
                for(var i=0; i
   
   
    
     arrHeight[i]){
                        minHeight = arrHeight[i];
                        minIndex = i;
                    }
                }
                /*定位*/
                $item.css({
                    top:minHeight+space,
                    left:minIndex*(itemWidth+space)
                });
                /*重新记录当前列的高度*/
                arrHeight[minIndex] = minHeight + space + $item.height();
            }
        });
        var maxHeight = arrHeight[0];
        for(var i=0; i
    
    


    
     
     
    
     
     
    
     
     



     
     

    
      
      

        
       
       
    
      
      
    
      
      

       
       正在加载中...
      
      

     
     

     
     

     
     
<script type="text/template" id="waterfall">
    <% for(var i=0;i
     
     
    
      
      

        
       
       
        
       
       
<%=list[i].text%>
    
      
      
    <%}%>
</script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.waterfall.js"></script>
<script src="js/template-native.js"></script>
<script>
    $(function () {
        /*瀑布流容器*/
        var $waterBox = $('.items');
        /*加载按钮*/
        var $btn = $('.btn');
        var render = function () {
            /*1.在页面初始化的时候，加载第一页的数据*/
            /*一页显示20条*/
            $.ajax({
                type:'get',
                url:'data.php',
                data:{
                    page:window.pageNow || 1,
                    pageSize:20
                },
                dataType:'json',
                beforeSend: function () {
                    $btn.addClass('loading').html('正在加载中...');
                },
                success: function (data) {
                    /*2.把数据渲染在页面当中*/
                    /*模板引擎*/
                    /*1)准备数据*/
                    var items = data.items;
                    /*2)准备模板*/
                    /*3)数据转换到html格式的字符串*/
                    var html = template('waterfall',{list:items});
                    $waterBox.append(html);
                    /*3.初始化瀑布流布局*/
                    $waterBox.WaterFall();
                    /*恢复按钮初始状态*/
                    /*8.如果这个时候没有数据了，显示“没有更多数据了”*/
                    if(items.length){
                        $btn.removeClass('loading').html('加载更多数据');
                    }else{
                        $btn.addClass('loading').html('没有更多数据了');
                    }
                    /*记录下一次加载的页数*/
                    window.pageNow = data.page;
                }
            });
        };
        render();
        $btn.on('click', function () {
            /*4.当页面渲染完成之后滚动到底部，有一个“加载更多”按钮，点击之后加载下一页的数据*/
            if($btn.hasClass('loading')) return false;
            render();
        });
        /*9.滚动到接近底部的时候自动加载*/
        $(window).on('scroll', function () {
            /*瀑布流容器的高度*/
            var itemsHeight = $('.items').height();
            /*文档距离顶部的高度*/
            var itemsTop = $('.items').offset().top;
            /*文档高度*/
            var documentHeight = itemsHeight + itemsTop;
            /*计算文档距离底部的距离为200px的时候，提前加载*/
            var scrollTop = $(this).scrollTop();
            var windowHeight = $(this).height();
            var distance = documentHeight - scrollTop - windowHeight;
            /*当距离底部200px的时候开始加载，并且需要加载完成*/
            if(distance < 200 && !$btn.hasClass('loading')){
                render();
            }
        });
    });
</script>