长沙网站开发_使用jQuery masonry插件加载更多

发布日期:2016-09-29 07:54

本次是利用把瀑布流代码来实现点击加载更多。首先引入jQuery插件与瀑布流插件jquery.masonry.min.js

这里注意jQuery插件版本,部分版本可能出现手机端无法加载(触摸无法监听)问题,本次使用的是jQuery v2.1.1

<script type="text/javascript" src="/m/js/jquery.min.js"></script>

<script type="text/javascript" src="/m/js/jquery.masonry.min.js"></script>

调用十分简单,主要注意ul要加上class="clear"和id="content",li中要加上post,当然命名可以改变,对应的js也需要变动

 <div class="news" id="con_bar">

    <ul class="clear con_news" id="content">

{dede:list pagesize='4'}

<li class="post">

<div class="time"><p class="time_top">[field:pubdate function='strftime("%d",@me)'/]</p><p class="time_bottom">[field:pubdate function='strftime("%Y-%m",@me)'/]</p></div>

<div class="right"><p class="title"><a href="/miew.php?aid=[field:id/]" class="title">[field:fulltitle/]</a></p>

<p class="tit">[field:description/]</p></div>

<div style="clear: both;"></div>

</li>

{/dede:list}

</ul>

<!--注意,瀑布流为无限加载形式,所以分页处一定要注意只掉用下一页 -->

        <div class="next_page" style="font-size:17px;">

         {dede:pagelist listitem="more"/}<div style="display:none;"> {dede:pagelist listitem="next"/}</div>

        </div>

</div> 

 <!-- 关于{dede:pagelist listitem="more"/}是处理无内容或者无下一页时无输出加载更多,此处修改主程序arc.listview.class.php的分页处即可 -->

  if($this->PageNo!=$totalpage && $totalpage>1)

        {

            $nextpage.="<li><a href='".$purl."PageNo=$nextpagenum".$pageaddurl."'> > </a><>\r\n";

            //增加more

            $more="<span id='more'>加载更多</span>";

            $endpage="<li><a href='".$purl."PageNo=$totalpage".$pageaddurl."'>末页</a><>\r\n";

        }

        if(preg_match('/next/i', $listitem)) $plist .= $nextpage;

        //在对应的下一页增加more

        if(preg_match('/more/i', $listitem)) $plist .= $more;

  <!-- 此处为处理js 注意更改命名时more,content,post同步对应的html页面命名 此js最好拆分出来写入单独js用来引入,避免多个页面书写多次--> 

<script type="text/javascript">

$(function(){

//对content调用masonry插件

$('#content').masonry({

itemSelector : '.post',

columnWidth : 260

});

//首先给窗口绑定事件scroll

$("#more").click(function() {

   // 然后判断窗口的滚动条是否接近页面底部,这里的20可以自定义

       var link = $(".next_page a");

       //首先取得下一页的链接地址

       var href = link.attr("href");

       //判断下一页的链接地址是否存在

       if (href != undefined) {

           //如果存在的话,用ajax获取数据

           $.ajax({

               type: "get",

               url: href,

               success: function(data) {

                   //将返回的数据进行处理,挑选出class是post的内容块

                   var $res = $(data).find(".post");

                   //结合masonry插件,将内容append进ID是content的内容块中

                   $("#content").append($res).masonry('appended', $res);

                   //newHref获取返回的内容中的下一页的链接地址

                   var newHref = $(data).find(".next_page a").attr("href");

                   //判断下一页地址是否存在,如果存在,替换当前页的链接地址。不存在,将当前页链接地址属性href移除,并替换内容为"下一页没有了"

                   if (newHref != undefined) {

                       link.attr("href", newHref);

                   } else {

$("#more ").css("display","none");

link.html("没有了").removeAttr("href");

};

      }

     });

   };

       //返回false,使得点击进入新页面失效

return false;

})

});

</script>

以上信息由长沙网站建设--长沙蒲公英网络收集与整理,禁止用于任何商业行为