我已经解决了在Tumblr上制作砖石工作的问题并且已经遵循了几个不同的教程,但我仍然无法让我的工作。帖子之间仍然存在垂直差距,我想消除这些差距。
以下是现在的样子:http://s14.postimg.org/3kai0mbht/masonry_help.png
以下是我的代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js"></script>
<script src="http://static.tumblr.com/yflpwuf/SSOm2d3y2/jquery.masonry.min.js"></script>
<script type="text/javascript">
var $posts = $('#contentarea');
$posts.imagesLoaded( function(){
$posts.masonry({
itemSelector : '.entry',
columnWidth: 400
});
});
</script>
#contentarea {
margin-top: 80px;
width:890px;
margin-left: auto;
margin-right: auto;
}
#contentarea .entry {
float: left;
width: 400px;
margin-bottom: 10px;
background: #fcfcfc;
margin-left: 8px;
margin-right: 8px;
padding: 10px;
padding-bottom: 15px;
border-radius: 8px;
<div id="contentarea" class="masonry js-masonry">
<div class="autopagerize_page_element">
{block:Posts}
{block:Text}
<div class="entry">
<div class="textpost">
{block:Title}
<h3>
<a href="{Permalink}" style="color: black">{Title}</a>
</h3>
{/block:Title}
{Body}
</div>
<ul class="like-reblog">
<li>{LikeButton size="15"}</li>
<li>{ReblogButton size="15"}</li>
<li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
<li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
</ul>
{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
{/block:Text}
{block:Photo}
<div class="entry">
<div class="photopost">
<img src="{PhotoURL-400}">
{block:Caption}{Caption}{/block:Caption}
</div>
<ul class="like-reblog">
<li>{LikeButton size="15"}</li>
<li>{ReblogButton size="15"}</li>
<li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
<li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
</ul>
{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
{/block:Photo}
{block:Photoset}
<div class="entry">
<div class="photosetpost">
{Photoset-400}
{block:Caption}{Caption}{/block:Caption}
</div>
<ul class="like-reblog">
<li>{LikeButton size="15"}</li>
<li>{ReblogButton size="15"}</li>
<li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
<li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
</ul>
{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
{/block:Photoset}
{block:Quote}
<div class="entry">
<div class="quotepost">
{Quote}
{block:Source}<div class="quotesource"><br>—{Source}</div>
{/block:Source}
</div>
<ul class="like-reblog">
<li>{LikeButton size="15"}</li>
<li>{ReblogButton size="15"}</li>
<li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
<li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
</ul>
{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
{/block:Quote}
{block:Link}
<div class="entry">
<div class="linkpost">
<a href="{URL}" {Target} style="color: black">{Name}</a>
{block:Description}{Description}{/block:Description}
</div>
<ul class="like-reblog">
<li>{LikeButton size="15"}</li>
<li>{ReblogButton size="15"}</li>
<li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
<li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
</ul>
{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
{/block:Link}
{block:Chat}
<div class="entry">
<div class="chatpost">
{block:Title}{Title}{/block:Title}
<table>
{block:Lines}
<tr>
<td>{block:Label}{Label}{/block:Label}</td>
<td>{Line}</td>
</tr>
{/block:Lines}
</table>
</div>
<ul class="like-reblog">
<li>{LikeButton size="15"}</li>
<li>{ReblogButton size="15"}</li>
<li>{block:NoteCount}<a href="{permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
<li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
</ul>
{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
{/block:Chat}
{block:Audio}
<div class="entry">
<div class="audiopost">
{AudioPlayer}
{block:Caption}{Caption}{/block:Caption}
</div>
<ul class="like-reblog">
<li>{LikeButton size="15"}</li>
<li>{ReblogButton size="15"}</li>
<li>{block:NoteCount}<a href="{permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
<li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
</ul>
{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
{/block:Audio}
{block:Video}
<div class="entry">
<div class="videopost">
{Video-500}
{block:Caption}{Caption}{/block:Caption}
</div>
<ul class="like-reblog">
<li>{LikeButton size="15"}</li>
<li>{ReblogButton size="15"}</li>
<li>{block:NoteCount}<a href="{permalink} #notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
<li>{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
</ul>
{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
{/block:Video}
{/block:Posts}
</div>