0

Tumblr テーマをグリッド (各投稿の幅が 500 ピクセルの 2 列のグリッド) として設計していますが、Masonry が機能していないようです。グリッドは「シームレス」ではありません。これが現在の様子です：画像

私は自分が間違っていることを本当に知りません。私は何時間もそれに取り組んでおり、「display: block;」を追加するなど、20 以上の提案を試しました。など。何も機能しません。これ以外に得られる唯一の変更点は、投稿が互いに重なってしまうことです。これはこれよりも悪いことです。

これが私の完全なTumblrワークアップです: [codes] .

お手伝いありがとう。

4

2 に答える 2

0

実際には次の 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
      });
  });
于 2012-07-02T15:04:05.263 に答える
0

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}ビューから消えます。

于 2012-07-01T22:43:45.720 に答える