在砖石网格中对齐 tumblr 帖子

Question

我正在尝试为我的 tumblr 博客制作一个主题，它应该看起来像 this

菜单栏和侧边栏没问题，但我在对齐帖子时遇到了一点问题，如上图所示，但我最终在我的 this博客。请帮我。我正在使用代码作为....

CSS :

#content{
width:900px;
top:65px;    
left: 10px;
float: left; 
position: absolute;
}

#container{
float:left;
background:#000;
width: 900px;
margin: 0px auto;
left:10px;
}

.entry {
float:left;
width: 350px;
overflow:hidden;
margin: 15px; 
padding: 15px;
background: {color:box};
display: inline-block;
position: relative;
z-index:2;
-webkit-border-radius:3px;
   -moz-border-radius:3px;
   border-radius:3px;
}

.entry img {
display: block;
width:auto;
max-width: 100%;
}

HTML :

<div id="container">
<div id="content">
<div class="autopagerize_page_element">
{block:Posts}
<div class="entry">
{........Different types of posts........}
</div>
{/block:Posts}
</div></div></div>

JQUERY :

<script src="http://static.tumblr.com/82upcij/4Kio3rj0h/masonry.js"> </script>

<script type="text/javascript">
$(window).load(function () {
$('#content').masonry(),
$('.masonryWrap').infinitescroll({
navSelector    : '#pagination',  
nextSelector   : '#pagination a#nextPage',
itemSelector : ".entry, .clear",
bufferPx : 40,
loadingImg : "",
loadingText : "Loading",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>

Answer 1

您没有正确使用 Masonry。本质上，您正在调用它，但没有向它传递任何参数，因此它不知道该怎么做。你也在错误的元素上调用它。您没有询问的无限滚动问题是另一回事，但这是您要修复 Masonry 调用的方法：

$(".autopagerize_page_element").masonry({ itemSelector: ".entry" });

在砖石网格中对齐 tumblr 帖子

Aligning tumblr posts in masonry grid

jquery

html

css

tumblr

masonry