infinite scroll和masonry实现的json类型瀑布流

最新推荐文章于 2021-08-06 09:14:51 发布

ddxu

最新推荐文章于 2021-08-06 09:14:51 发布

阅读量825

点赞数

分类专栏： JS 文章标签： ui 瀑布流 infinitescroll masonry

本文链接：https://blog.csdn.net/d12345678a/article/details/50829747

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link type="text/css" rel="stylesheet" href="../css/global.css" />
    <link type="text/css" rel="stylesheet" href="../css/styleClassify.css" />
    <script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../js/jquery.imageScroller.js" type="text/javascript"></script>
    <script src="../js/jquery.masonry.min.js" type="text/javascript"></script>
    <script src="../js/jquery.infinitescroll.min.js" type="text/javascript"></script>

   <style>
   #wrapper {margin-left:20px;}
   </style>
</head>
<body>
<div class="content">
    <div class="sort">
        <div class="sort_left">
            <ul id="category">
            </ul>
        </div>
        <div class="sort_right">
            <div class="scrollClassify">
           <div id="scroll">
               <div id="btn1"><img src="../image/left_arrow.gif" alt=""/></div>
                   <div id="viewer">
                       <ul id="livechannel">
                        </ul>
                    </div>
               <div id="btn2"><img src="../image/right_arrow.gif" alt=""/></div>
           </div>
            <div class="clear"></div>
           </div>

           <ul id="wrapper">
           </ul>
           <div class="loading">
           </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

    <div id="navigation"><a href="这里是ajax请求的地址"></a></div></body>
<script type="text/javascript">
       var totalPage = 0;
       var num = 1;
       var categoryName = '';
        $(document).ready(function() {
        var per_page = 24;
       var page = 1;
       $.ajax({
                 url: '*********************************',
                 type: 'GET',
                 dataType : "jsonp",//数据类型为jsonp
               jsonp: "callback",
               data : {"per_page":per_page,"page":page},
                 error: erryFunction, //错误执行方法
                 success: succFunction //成功执行方法
        });
       function erryFunction() {
           alert("加载出错！");
        }
       function succFunction(data) {
           if(data.result_message=="成功"){
               totalPage = data.data.total_page;
               var res = eval(data.data);
               var alist = new Array();
               var current = 0;

               for(var i=0 ; i < res.category.length; i++){
                   var str = '<li οnclick="chooseCategory(\''+ res.category[i].id +'\')"><span';
                   if(i==0){
                       str = str + ' class="after"';
                       current = i;
                       categoryName = res.category[i].name;
                   }
                   str = str + '><a href="#">' + res.category[i].name + '</a> </span></li>';
                   $("#category").append(str);
               }
               $("#category>li").each(function (i, items) {
                   alist[i] = $(items);
                   $(alist[i]).click(function () {
                       if (i != current) {
                           $(this).children("span").addClass("after");
                           $(alist[current]).children("span").removeClass("after");
                           current = i;
                           categoryName = res.category[i].name;
                       }
                   });
               });

               var labellist = new Array();
               var cur = 0;
               for(var j=0;j<res.label.length;j++){
                   var odstr = '<li class="box" οnclick="chooseLabel(\''+ res.label[j].id +'\')"><a href="#"';
                   if(j==0){
                       odstr = odstr + ' class="select"';
                   }
                   odstr = odstr + '>' + res.label[j].name + '</a></li>';
                   $("#livechannel").append(odstr);
               }
               $("#livechannel>li").each(function (i, items) {
                   labellist[i] = $(items);
                   $(labellist[i]).click(function () {
                       if (i != cur) {
                           $(this).children("a").addClass("select");
                           $(labellist[cur]).children("a").removeClass("select");
                           cur = i;
                       }
                   });
               });
               for(var j=0;j<res.odchannel.length;j++){
                   var odstr = '<li id="image" class="masonry-brick"><a href="../sanji/detail.html?className='+ encodeURI(encodeURI(categoryName)) +'&columnId='+ res.odchannel[j].id +'"><img src="' + res.odchannel[j].imageUrl + '" width="160" height="160" alt=""/><h3>'
                               + res.odchannel[j].name + '</h3><p>' + res.odchannel[j].description + '</p></a></li>';
                   $("#wrapper").append(odstr);
               }
               var $container = $('#wrapper');
               $container.imagesLoaded(function(){
                   $container.masonry({
                       itemSelector: '#image',
                       gutterWidth: 5,
                       columnWidth: 190,
                       isAnimated:true,
                       isFitWidth: true
                   });
               });

               $container.infinitescroll({
                   navSelector: "#navigation",
                   nextSelector: "#navigation a",
                   itemSelector: "#image",
                   debug: true,
                   animate: true,
                   extraScrollPx: 150,
                   bufferPx: 40,
                   errorCallback: function() {
                       alert('error');
                   },
                   localMode: false,
                   dataType: 'json',//可以是json
                   appendCallback: false,
                   loading: {
                       msgText: "加载中...",
                       finishedMsg: '没有新数据了...',
                       selector: '.loading' // 显示loading信息的div
                   }
               },
               function(data){
                    if(num>totalPage){
                       $("#navigation").remove();
                       $(".loading").hide();
                       $(window).unbind('.infscr');
                   }else{
                       num = num + 1;
                       if(data.result_message=="成功"){
                           var res = eval(data.data);
                           var str = '';
                           for(var i=0;i<res.odchannel.length;i++){
                               var odstr = '<li id="image"><a href="../sanji/detail.html?className='+ encodeURI(encodeURI(categoryName)) +'&columnId='+ res.odchannel[i].id +'"><img src="' + res.odchannel[i].imageUrl + '" width="160" height="160" alt=""/><h3>'
                                       + res.odchannel[i].name + '</h3><p>' + res.odchannel[i].description + '</p></a></li>';
                               str += odstr;
                           }
                           var $boxes = $(str);
                           $boxes.imagesLoaded(function(){
                               $container.append($boxes).masonry('appended' , $boxes);
                           });
                       }
                   }
               }
               );
           }
       }

});

</script>

</html>

因为涉及到跨域，我把jquery.infinitescroll.min.js做了如下修改：

case 'json':
                    instance._debug('Using ' + (method.toUpperCase()) + ' via $.ajax() method');
                    $.ajax({
                        dataType: 'jsonp',
                       jsonp: "callback",
                        type: 'GET',