Question

我正在撰写推荐页面，其中包含三列中的多个小方框，其中包含一个文本片段，点击后会展开到全宽并显示完整的推荐。网格中还有一个使用同位素标记功能的固定信息框。

这是我所拥有的jsFiddle：http://jsfiddle.net/HjdAn/4/

我的JS：

var $container = $('.testimonials').isotope({
  itemSelector: '.item',
  stamp: '.stamp',
  masonry: {
    columnWidth: '.column-sizer',
    gutter: '.gutter-sizer'
  }
});

$container.on( 'click', '.item:not(.info-box)', function() {
    $container.find('.item.read-more').not(this).removeClass('read-more');

    $(this).toggleClass('read-more');

    $container.isotope('layout');
});

当您单击白色框时，它会展开并显示完整的文本，但它不会正确地重新计算布局。例如，如果您单击第三个白色框，它应该向下移动一行，但是它下面的两个元素应该向上移动以填充展开框留下的间隙。

这可能吗？

Answer 1

我确实知道，自2014年以来，您可能已经对这一个或那个进行了排序，但也许这会帮助处于类似情况的其他人。您所拥有的基本上是符合Isotope的规格。我是否理解你是否喜欢推荐摘录框以填补空白空白？如果是这样，并且如果您不需要Isotope提供的过滤，则可以考虑使用与同位素相同的作者使用Packery。这可以通过在盒子周围移动来更好地适应布局。请注意，在扩展邮票周围的推荐时，您仍然会遇到一些空白。这是我的小提琴克隆 - http://jsfiddle.net/planxdesign/o9yjopkk/2/

JS代码本身与您的代码非常相似：

var $container = $('.testimonials').packery({
  itemSelector: '.item',
  stamp: '.stamp',
  columnWidth: '.column-sizer',
  gutter: '.gutter-sizer'
});

$container.on( 'click', '.item:not(.info-box)', function(e) {
  $container.find('.item.read-more').not(this).removeClass('read-more');
  $(e.currentTarget).toggleClass('read-more');
  $container.packery('layout');
});

使用Isotope将单击的项目展开为全宽

1 个答案: