同位素容器未居中对齐答案

【问题标题】：Isotope container not center aligning同位素容器未居中对齐
【发布时间】：2014-08-20 16:02:27
【问题描述】：

我将 Isotope 用于我的投资组合网站，但在尝试将网格项目居中时遇到了一些麻烦。这是我的作品集供参考：

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

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

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

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

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

【问题讨论】：

标签： jquery css jquery-isotope

【解决方案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

});

【讨论】：