瀑布流無限加載infinitescroll插件與masonry插件使用

時間 2019-11-16

標籤瀑布無限加載 infinitescroll 插件 masonry 使用欄目悠閒生活简体版

原文原文鏈接

masonry官網地址http://masonry.desandro.com/，infinitescroll官網地址http://www.infinite-scroll.com/javascript

無限滾動原理：無限滾動的實現原理就是當你在網頁上的滾動條滾動到離網頁底部必定長度的時候，觸發某ajax函數（infinite-scroll內已經封裝好）,日後臺加載文件或者數據，又或者從外部引入靜態html形式文件。css

一個簡單的實例html

html頁面代碼以下java

<!DOCTYPE HTML>
<html>
  <head>
    <title>無限瀑布流</title>
    <style type="text/css">
      .container{padding:20px;}
      .box{margin-bottom:20px;float:left;width:220px;}
      .box .image_box{width:100%;height:300px;background:#FCF;}
      #infscr-loading{text-align:center;padding:10px;background:#000;opacity:0.8;filter:alpha(opacity=80);color:#FFF;}
      #infscr-loading{position:fixed;bottom:0px;left:45%;z-index:9999;width:200px;}
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/masonry/2.1.08/jquery.masonry.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
    <script type="text/javascript">
    $(function(){
    var $container = $('#masonry');
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.box',
            gutterWidth : 20,
            isAnimated: true,
        });
    });
    $container.infinitescroll({
        navSelector  : '#page-nav',
        nextSelector : '#page-nav a',
        itemSelector : '.box',
        loading: {
            finishedMsg: '沒有更多的頁面加載。',
            loadingText:'加載中',
            img: 'images/loading.gif'
        }
    },function(newElements){
            var $newElems = $( newElements ).css({ opacity: 0 });
            $newElems.imagesLoaded(function(){
                $newElems.animate({opacity:1});
                $container.masonry( 'appended', $newElems, true ); 
            });
        }
    );
    })
    </script>
  </head>
  <body>
  <div id="masonry" class="container">
  <div class="box"><div class="image_box">a</div></div>
  <div class="box"><div class="image_box">a<br>b</div></div>
  <div class="box"><div class="image_box">a<br>c</div></div>
  <div class="box"><div class="image_box">a<br>d<br>f</div></div>
  <div class="box"><div class="image_box">a</div></div>
  <div class="box"><div class="image_box">a</div></div>
  <div class="box"><div class="image_box">a<br>d<br>c<br>ad</div></div>
  <div class="box"><div class="image_box">a</div></div>
  <div class="box"><div class="image_box">a</div></div>
</div>
<div id="page-nav"><a href="data.jsp?page=1"></a></div>
  </body>
</html>

data.jsp服務接口返回數據jquery

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
   String page1 = request.getParameter("page");
   if("4".equals(page1)){
       out.print("");
   }else{
   out.print("<div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div>");
   }
%>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。