Question

我在我的投资组合网站上使用Isotope，我在尝试集中网格项目时遇到了一些麻烦。这是我的作品集：

下面的jsfiddle使用相同的尺寸和边距，似乎工作得很好。据我所知，我的容器是造成问题的原因;它不像jsfiddle中的容器那样居中。无论我做什么，我看起来都会拉伸整个页面的宽度。我修改的唯一内容是sortBy和itemSelector属性，我正在初始化Isotope网格：

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

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

我已经检查了其他答案并尝试使用Perfect Masonry无效！

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

Answer 1

最简单的方法是使用isotope 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

});

同位素容器不对中

1 个答案: