Question

我将Tumblr主题设计为网格（每个帖子上宽度为500px的双列网格），而Masonry似乎不起作用。网格不是“无缝的”。这就是它现在的样子：image

我真的不知道自己做错了什么。我已经工作了好几个小时，已经尝试过两十多个建议，例如添加“display：block;”什么都行不通。除此之外我唯一的变化是帖子会相互重叠，这比这更糟糕。

以下是我完整的Tumblr检查： [codes]。

感谢您的帮助。

Answer 1

当您在masonry上jQuery(window).load(function(){拨打<script type="text/javascript">时，我在code上看到的内容，您忘了关闭加载通话。

根据您提供的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 }); });

进行测试

{block:Posts}{/block:Posts}

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

警告框消失后，您会注意到jQuery生效，{{1}}将从视图中消失。

Answer 2

实际上有两个问题：

您需要在每个帖子元素中移动<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
      });
  });

jQuery Masonry不在Tumblr工作

2 个答案: