如何加载同位素布局与图像完美的位置上的差距，甚至在整个页面加载之前

How to load isotope layout with images perfectly on their position with gaps even before the whole page loads

本文关键字：加载 差距 位置 何加载 同位素 布局 完美 图像      更新时间：2023-09-26

在这个示例中，您将看到，当页面加载时，两个框会相互亲吻一到两秒钟，并在之后创建间隙(移动到适当的位置)。

它如何完美地加载在他们的位置上，即使页面仍然加载，也不会显示间隙，这样你就不会看到一个没有间隙的网格看起来很乱?

我使用固定的图像高度和宽度与fitRows，所以我假设这是可能的。

在我的例子中，未样式的外观只会停留一段时间，因为项目不是很多，但在我正在处理的页面上，我显示了太多的项目，需要更长的时间来加载。

下面是我的代码:

 var $container = $('.grid').isotope({
        itemSelector: '.grid-item',
        layoutMode: 'fitRows',
        fitRows: {
          gutter: 10
        }
});
  $container.imagesLoaded().progress( function() {
    $container.fadeIn(1000).isotope('layout');
  });

这是一个非常简单的解决方案。将行距从布局模式中移除，并通过CSS设置行距(边距)。

http://codepen.io/ableslayer/pen/ORVvpw 

 var $container = $('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'fitRows'
});
CSS: 

.grid-item {
  float: left;
  width: 300px;
  height: 300px;
  margin-bottom: 10px;
  margin-right: 10px;
}
相关文章：