无法让砌体在tumblr上工作

时间:2015-09-23 17:46:47

标签: html css tumblr masonry

我已经解决了在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>&mdash;{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>

0 个答案:

没有答案