1

我是 JavaScript 新手。我真的只知道 html css，在我的新 tumblr 主题中添加砖石是我想要接受的挑战，事实证明这就是：挑战。

我的示例页面：示例

您可以看到，如果列不能填满整个页面，那么砌体网格的右侧将出现一个大间隙。如果存在间隙，我想要的是根据窗口大小的宽度来设置网格中心。

我已经尝试使用 .masonry 和 .entry masonry-brick 上的自动边距使用 css 来破解它，但没有运气。

我认为这可能是 javascript/jquery 中修复的问题，但我对它太陌生了。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>

<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js">
</script>
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>

<script>
$(function(){
var $container = $('#posts');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.entry',
});
});
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  columnWidth: 250,
  itemSelector: '.entry'
});

$container.infinitescroll({
itemSelector : ".entry",
navSelector : "div.pagination",
nextSelector : ".pagination a#next",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
  var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>

这是所有代码（代码是从为其他开发人员打开此代码的主题开发人员那里复制和粘贴的）。

提前感谢任何人的帮助。

4

0 回答 0