在砌体网格中对齐tumblr柱

时间:2016-03-10 08:28:33

标签: jquery html css tumblr masonry

我试图为我的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> 

1 个答案:

答案 0 :(得分:1)

你没有正确使用砌体。基本上,你正在调用它,但不传递任何参数,所以它不知道该怎么做。你也在错误的元素上调用它。你没有问过的无限滚动的问题是另一回事,但是这就是你要如何解决这个Masonry的问题:

api["use" + name] = server.use.bind(server);