按位置识别并添加 HTML class 到砌体项目

Question

我正在使用 Masonry 在两列中呈现一组项目。下面给出的是 HTML 结构。

<div id="grid">
 <article class="entry"> … </article>
 <article class="entry"> … </article>
 <article class="entry"> … </article>
 <!-- And so it goes -->
</div>

我想要实现的是确定哪一项在“左栏”中，哪一项在“右栏”中，并根据此添加 HTML class .我选择识别项目放置的方式是通过它们的位置属性，例如对于左侧的那些项目，它将等于“0”，同样编码了以下 JS。

var $grid = $('#grid');
$grid.imagesLoaded( function() {
    $grid.masonry({
    itemSelector: '.entry',
    percentPosition: true,
    columnWidth: 20,
    gutter: 25,
    isAnimated : false
  });
});
$("#grid .entry").each( function() {
    var position = $(this).position();
    if( position.left == 0) {
      $(this).addClass('left-column');
    } else {
      $(this).addClass('right-column');
   }
});

面临的问题是，每一项都被识别为位于左侧。你能描述一下有什么问题或建议任何替代方法吗？非常感谢您的帮助。

我创建了一个 JSfiddle，这里是 link https://jsfiddle.net/DhrubaRC/7441frh3/

谢谢！

Answer 1

根据 Masonry 的说法（Desandro 在这方面和 Isotope 方面做得非常出色）：http://desandro.github.io/masonry/docs/methods.html#layout 布局方法接受第三个参数，即回调参数。

你可能想先统计匹配'entry'个元素的个数，然后调用Masonry函数，在回调中检查你所在的索引等于元素个数减1 （即，如果你已经完成了所有这些），当它完成时，调用 $('#grid .entry').each.... 代码。到那时，所有定位信息都应该已设置并按预期工作。

按位置识别并添加 HTML class 到砌体项目

Identify and add HTML class to masonry items by their position

javascript

jquery

position

addclass

masonry