掌握jQuery和砌體無限滾動

我執行使用jQuery Masonery一個無限滾動的動態內容：掌握jQuery和砌體無限滾動

$（函數（）{

var $container = $('#container'); 

$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector: '.box', 
    columnWidth: 100 
    }); 
}); 

$container.infinitescroll({ 
    navSelector : '#page-nav', // selector for the paged navigation 
    nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) 
    itemSelector : '.box',  // selector for all items you'll retrieve 
    loading: { 
     finishedMsg: 'No more pages to load.', 
     img: 'http://i.imgur.com/6RMhx.gif' 
    } 
    }, 
    // trigger Masonry as a callback 
    function(newElements) { 
    // hide new items while they are loading 
    var $newElems = $(newElements).css({ opacity: 0 }); 
    // ensure that images load before adding to masonry layout 
    $newElems.imagesLoaded(function(){ 
     // show elems now they're ready 
     $newElems.animate({ opacity: 1 }); 
     $container.masonry('appended', $newElems, true); 
    }); 
    } 
); 
    });

這是最簡單的例子，但我想知道是否有可能通過AJAX獲得動態內容，而不僅僅是如示例中所示的靜態頁面：

<nav id="page-nav"> 
    <a href="../pages/2.html"></a> 
</nav>

感謝您的幫助！

來源

2013-01-16 Dawid

這是非常簡單的。請按照以下步驟操作。

更改導航鏈接：

<nav id="page-nav"> 
    <a href="../pages/AjaxSource.php?no=2"></a> 
</nav>

你AjaxSource.php應該是這樣的

<?php 
$pageNo= $_GET['no']; 
?> 

<?php if ($pageNo==2){?> 

<div id="container" class="transitions-enabled clearfix"> 

    <div class="box photo col3"> 
     <a href="http://www.flickr.com/photos/nemoorange/5013039951/" title="Stanley by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" /></a> 
    </div> 

    <div class="box photo col3"> 
     <a href="http://www.flickr.com/photos/nemoorange/5013039951/" title="Stanley by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" /></a> 
    </div> 

</div> 

<?php } ?>

來源

2013-02-26 09:55:30

掌握jQuery和砌體無限滾動

回答

相關問題