javascript - воссоздание pinterest как сетка

Question

Я создаю сетку как pinterest , и все работает отлично, за исключением того, что получение высоты элементов в коде происходит слишком медленно.
в моем коде, я должен получить высоту последнего добавленного элемента и добавить его в высоту строки, поэтому для следующего элемента я могу установить верхнее положение на высоту.
вот код:

testOne: function(itemArray, parent){ 
      // layout 
      var layout = []; 
      for(i in itemArray_){ 
       var item = itemArray[i]; 
       var template = this.template(item); 
       // get smallest height 
       var smallestHeight = layout[0]; 
       var smallestHeightRow = 0; 
       for(i in layout){if(layout[i] < smallestHeight){smallestHeight = layout[i]; smallestHeightRow = i;}} 
       // add item to screen 
       parent.append(template); 
       // add height of last item 
       var item = parent.find("[item-id="+item._id+"]"); 
       item.css("top", smallestHeight+15+"px"); 
       item.css("left", smallestHeightRow*25+"%"); 
       var itemHeight = item[0].offsetHeight; 
       layout[smallestHeightRow] = smallestHeight+itemHeight; 
      } 
     }, 

но проблема в том, этот процесс быстро для получения высоты элемента, за исключением.
так, не получая высоту, функция принимает около 20ms
но получить высоту добавляет еще 75 мс в процесс и делает его о 95МСЕ
теперь мой вопрос, как я могу сделать определение высоты намного быстрее?

Answer 1

Вы можете сохранить высоты разных строк после того, как вы закончите с добавлением первого раунда плиток. Так что в следующий раз, когда вы добавляете новые плитки, он будет доступен вам, и вам не придется вычислить его или подождать.