根据位置

Question

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

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

我想要实现的是确定项目中的哪一项位于“左列”中，哪一项位于“右列”中，并根据该类添加HTML类。我选择识别商品展示位置的方式是他们的位置属性，例如对于左边的那些项目，它将等于'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，这里是链接https://jsfiddle.net/DhrubaRC/7441frh3/

谢谢！