我是javascript的新手。我真的只知道html css并在我的新tumblr主题中添加砌体是我想要经历的一个挑战,它证明了这一点:挑战。
我的示例页面:Example
您可以看到,如果列无法填满整个页面,那么砌体网格右侧会出现较大的间隙。我想要的是如果存在间隙,则根据窗口大小的宽度确定网格中心。
我曾尝试使用.masonry上的自动边距以及.entry砌砖并使用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>
以下是所有代码(代码是从为其他开发人员打开此主题的主题开发人员复制和粘贴的)。
提前感谢任何人的帮助。