需要Infinitescroll與簡單的砌體工作tumblr

不知道我做錯了什麼。砌體工程，但無限滾動不。我正在嘗試使最簡單的砌體/ InfiniteScroll主題建立。我嘗試了很多不同的方法，但仍然陷入困境。需要Infinitescroll與簡單的砌體工作tumblr

<title>{title}</title> 
    <meta name="description" content="{MetaDescription}" /> 
    <link rel="shortcut icon" href="{Favicon}"> 

    <!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script> 
<script type="https://github.com/paulirish/infinite-scroll/blob/master/jquery.infinitescroll.min.js"></script> 
<script type="text/javascript"> 
$(window).load(function() { 
var $content = $('#container'); 
$content.masonry({itemSelector: '.item', columnWidth:300 
}); 
$content.infinitescroll({ 
navSelector : 'div#pagination', 
nextSelector : 'div#pagination a#nextPage', 
itemSelector : '.item' 
}); 
}); 
</script> 

<style> 
    .item{width:300px;} 
    img{max-width:100%;} 
</style> 

    </head> 
    <body> 
<div id="container">   
{block:Posts} 

{block:Photo} 
<div class="item"><img src="{PhotoUrl-500}" title="{PhotoAlt}"/></div> 
{/block:Photo} 


{/block:Posts} 
</div><!--wall--> 

{block:Pagination} 
<div id="pagination"> 
{block:NextPage} 
<a id="nextPage" href="{NextPage}"></a> 
{/block:NextPage} 
{block:PreviousPage} 
<a href="{PreviousPage}"></a> 
{/block:PreviousPage} 
</div> 
{/block:Pagination} 
{/block:IndexPage} 
</div> 
    </body> 
</html>

來源

2013-12-15 BVSK

或許，如果你願意，你可以使用此代碼，這是最好的一個到目前爲止，我還發現：

<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script> 
    <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script> 

    <script type="text/javascript"> 
    $(window).load(function(){ 
    var $wall = $('.posts'); 
    $wall.imagesLoaded(function(){ 
    $wall.masonry({ 
    itemSelector: '.entry', 
    isAnimated : false 
    }); 
    }); 

    $wall.infinitescroll({ 
    navSelector : "div#navigation", 
    nextSelector : "div#navigation a#nextPage", 
    itemSelector : ".entry", 
    bufferPx : 2000, 
    debug : false, 
    errorCallback: function() { 
    $('#infscr-loading').fadeOut('normal'); 
    }}, 
    function(newElements) { 
    var $newElems = $(newElements); 
    $newElems.hide(); 
    $newElems.imagesLoaded(function(){ 
    $wall.masonry('appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');}); 
    }); 
    }); $('.posts').show(500); 
    }); 
    </script> 
<script> 
    $.fn.changebackgroundColor = function(msg) { 
    $("#perma").css("#000"); 
    }; 
</script>

我與它的無限滾動沒有問題而且很簡單。您應該檢查Selector和var名稱以放入主題中的那些名稱。除此之外，我認爲這個問題可能是你正在使用的腳本。也許嘗試使用不同的。我曾經有一些類似於你的，我意識到當我調試我的頁面時他們甚至沒有響應。這可能是一個類似的問題。

來源

2014-06-23 18:05:12 pikkkura

需要Infinitescroll與簡單的砌體工作tumblr

回答

相關問題