jquery - 同位素容器未居中

Question

我正在为我的投资组合网站使用同位素，但在尝试将网格元素居中时遇到了一些麻烦。这是我的作品集以供引用:

http://vontheodore.com

下面的 jsfiddle 使用相同的尺寸和边距，并且看起来运行良好。据我所知，我的容器是导致问题的原因；它的居中方式与 jsfiddle 中的容器不同。无论我做什么，我的似乎都会拉伸(stretch)页面的整个宽度。我唯一修改的是初始化同位素网格的 sortBy 和 itemSelector 属性:

http://jsfiddle.net/P6JGY/2045/

$container.isotope({
    // disable window resizing
    resizable: false,
    itemSelector: '.post',
    sortBy : 'random',
    masonry: {
      columnWidth: colW
}

我已经检查了其他答案并尝试了 Perfect Masonry 无济于事!

有什么想法吗？提前致谢。

Answer 1

最简单的方法是使用同位素 v2 和“isFitWidth: true”以及更新的 jQuery(您的 jsfiddle 中有 1.5)。

这是一个更新的 jsfiddle isotope v2 centered

$(function(){

var $container = $('#container'),
  $body = $('body'),
  colW = 360,
  columns = null;

 $container.isotope({
 // disable window resizing
  resizable: false,
 masonry: {
  columnWidth: colW,
    isFitWidth: true
}
});

$(window).smartresize(function(){
// check if columns has changed
var currentColumns = Math.floor( ( $body.width() -10 ) / colW );
if ( currentColumns !== columns ) {
  // set new column count
  columns = currentColumns;
  // apply width to container manually, then trigger relayout
  $container.width( columns * colW )
    .isotope('reLayout');
}

}).smartresize(); // trigger resize to set container width

});