jQuery砌體不工作在Tumblr

我正在設計我的Tumblr主題作爲網格（每個職位500px寬的兩列網格）和砌體似乎並沒有工作。網格不是「無縫的」。這就是它現在的樣子：image jQuery砌體不工作在Tumblr

我真的不知道我做錯了什麼。我已經在這裏待了好幾個小時，並且嘗試了兩次以上的建議，比如添加「display：block」。等等。沒什麼用。除此之外，我所得到的唯一改變是帖子會彼此重疊，這比這更糟糕。

這裏是我的完整的tumblr後處理： [codes]。

謝謝你的幫助。

2012-07-01 user1494822

你試過用螢火蟲調試它嗎？ – Killrawr

我有和使用螢火蟲但調試意味着什麼？我怎麼做？ – user1494822

調試與單元測試相同，爲每個部分或事件設置幾個不同的單元測試，然後運行它們並查看單元測試失敗的時間（並讓您更好地瞭解可能發生錯誤的位置）。對於javascript/jquery，QUnit是一個很好的調試器/單元測試器。 – Killrawr

根據我在code上看到的情況，當您撥打電話的masonry時，您忘記關閉負載呼叫。

基於關閉您提供的代碼，您<script type="text/javascript">了。

jQuery(window).load(function(){ 
    $('#container').masonry({ 
    itemSelector: '.post', 
    columnWidth : 520 
    });

before http://iforce.co.nz/i/2t02emn1.z3f.png

，直到我看到沒有關閉語法});，我不相信你曾經調用jQuery.noConflict()（沒關係，它會與jQuery工作了也很正常，但它應該是這樣..

$(window).load(function(){ 
    $('#container').masonry({ 
    itemSelector: '.post', 
    columnWidth : 520 
    }); 
    });

您可以alert('hello this is a working test');

$(window).load(function(){ 
    alert('hello this is a working test'); 
    $('#container').masonry({ 
    itemSelector: '.post', 
    columnWidth : 520 
    }); 
    });

測試

after http://iforce.co.nz/i/5i4xd5fe.xc4.png

警告框消失後，你會發現jQuery的生效和{block:Posts}{/block:Posts}會從視野中消失。

來源

2012-07-01 22:43:45 Killrawr

不，這沒有做任何事情..這很有趣，因爲我做了一切砌體說一步一步做，它仍然不適合我.. – user1494822

@ user1494822更新了答案/ w屏幕截圖。問候 – Killrawr

實際上有兩個問題：

您需要將每個崗位的元素裏面你<div class="post"> </div>標籤
您需要關閉您的函數調用上window.load

所以，＃1會是這個樣子......

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

{block:Text} 
<div class="post"> 
{block:Title}<span class="title">{Title}</span>{/block:Title} 
{Body} 
</div><!--post--> 
{/block:Text} 

{block:Photo} 
<div class="post"> 
<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}</center> 
{block:Caption}{Caption}{/block:Caption} 
</div><!--post--> 
{/block:Photo} 

{block:Photoset} 
<div class="post"> 
<center>{Photoset-500}</center> 
{block:Caption}{Caption}{/block:Caption} 
</div><!--post--> 
{/block:Photoset} 

{block:Quote} 
<div class="post"> 
<span class="quote">&ldquo;{Quote}&rdquo;</span> 
{block:Source}{Source}{/block:Source} 
</div><!--post--> 
{/block:Quote} 

{block:Link} 
<div class="post"> 
<a title="" href="{URL}" class="postlink" {Target}>{Name}</a> 
{block:Description}{Description}{/block:Description} 
</div><!--post--> 
{/block:Link} 

{block:Audio} 
<div class="post"> 
{AudioPlayerGrey} 
{block:Caption}{Caption}{/block:Caption} 
</div><!--post--> 
{/block:Audio} 

{block:Chat} 
<div class="post"> 
{block:Title}<span class="title">{Title}</span>{/block:Title} 
<ul class="chat"> 
    {block:Lines} 
     <li> 
      {block:Label}<span class="label">{Label}</span>{/block:Label}{Line} 
     </li> 
    {/block:Lines}    
</ul> 
</div><!--post--> 
{/block:Chat} 

{block:Video} 
<div class="post"> 
<center>{Video-500}</center> 
{block:Caption}{Caption}{/block:Caption} 
</div><!--post--> 
{/block:Video} 

{block:Answer} 
<div class="post"> 
<b>{Asker} asked:</b> {Question} 
<p>{Answer} 
</div><!--post--> 
{/block:Answer} 

{/block:Posts} 

</div><!--container-->

和＃2的外觀像這樣...

jQuery(window).load(function(){ 
    $('#container').masonry({ 
      itemSelector: '.post', 
      columnWidth : 520 
     }); 
    });

來源

2012-07-02 15:04:05 Ally

jQuery砌體不工作在Tumblr

回答

相關問題