tumblr - jQuery Masonry 在 Tumblr 中不起作用

Question

我正在将我的 Tumblr 主题设计为网格（每篇文章宽度为 500 像素的两列网格），而 Masonry 似乎不起作用。网格不是“无缝的”。这就是它现在的样子：图片

我真的不知道我做错了什么。我已经做了几个小时，并尝试了超过两打建议，比如添加“显示：块；” 等等。没有任何效果。除此之外，我不断得到的唯一变化是帖子会相互重叠，这比这更糟糕。

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

感谢您的帮助。

Answer 1

其实有两个问题：

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
      });
  });

Answer 2

根据我在您拨打on时在您的代码上看到的内容，您忘记关闭您的加载呼叫。masonryjQuery(window).load(function(){

根据您提供的代码<script type="text/javascript">。

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

_{（来源：iforce.co.nz）}

在我看到没有关闭语法之前看起来很好，});而且我不相信你曾经打电话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
  });
  });

_{（来源：iforce.co.nz）}

警告框消失后，您会注意到 jQuery 生效并且{block:Posts}{/block:Posts}会从视图中消失。