在砌体网格中对齐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> 

- Sachin Sintu

Answer 1

您没有正确使用Masonry。基本上，您正在调用它，但没有传递任何参数，因此它不知道该怎么做。您还在错误的元素上调用它。您关于无限滚动的问题（您没有询问）是另一回事，但以下是您需要修复Masonry调用的方法：

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

- Ally

---

哇！！它像魔法一样运行了。谢谢你。非常感谢 :) - Sachin Sintu