在下一行中插入新图块

Question

我正在尝试创建一个类似于Google Image的行为，点击网格中的其中一个图块会在行的末尾插入一个元素。我有一个解决方案，但想知道是否有更高效的算法？

我有一个瓷砖网格，所有瓷砖的宽度都是向左浮动的。我将点击的图块的Y坐标与下一组图块的Y坐标进行比较。如果它们的Y坐标与原始Y坐标不匹配，我知道该tile属于下一行。

是否有更高效的算法？

$('.tile').click( function() {
    var ele = $(this),
        eleY = ele.position().top,
        next = ele,
        nextY = eleY;

    while (eleY == nextY) {
        next = $(next).next()[0];
        nextY = $(next).position().top;
    }

    $(next).before('<div class="tile col-6">My New Tile</div>'); 

});

https://jsfiddle.net/j9ku6shr/4/

Answer 1

我无法证明这更有效，但这就是我所做的方法。

jsFiddle

$('.tile').click( function() {

    showNew(this);

});

function showNew(tile)
{
    var newtile = '<div class="tile tile--new col-6">My New Tile</div>';
    if( $(tile).next('div').length )
    {
      var nextdiv = $(tile).next('div');
      if(nextdiv.position().top > $(tile).position().top)
      {
        $(tile).after(newtile);
      }
      else
      {
        showNew( nextdiv );
      }
    }
    else
    {
      $(tile).after(newtile);
    } 
}