jQuery Масонство не работает в Tumblr

Question

Я разрабатываю тему Tumblr как сетку (двухколоночная сетка с шириной 500 пикселей на каждое сообщение), и масонство, похоже, не работает. Сетка не является «бесшовной». Вот как это выглядит прямо сейчас: image

Я действительно не знаю, что я делаю неправильно. Я был у него часами и попробовал более двух десятков предложений, таких как добавление «display: block»; и т.д. Ничего не работает. Единственное изменение, которое я продолжаю получать, кроме этого, - столбы будут перекрываться друг с другом, что хуже этого.

Вот моя полная работа Tumblr: [codes].

Благодарим за помощь.

Answer 1

От того, что я вижу на вашем code, когда вы звоните masonry по телефону jQuery(window).load(function(){, вы забыли закрыть свой запрос на загрузку.

На основании кода, предоставленного вами <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} исчезнет из поля зрения.

Answer 2

Есть на самом деле две проблемы:

1. Вы должны переместить <div class="post"> </div> теги внутри каждого почтового элемента
2. Вы должны закрыть вызов функции на 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 
     }); 
    });