javascript - recreation of pinterest like grid

Question

I'm creating a grid like pinterest and everything is working fine except that getting the height of items in the code is too slow.
in my code, I have to get the height of last added element and add it to the height of the row, so for the next item I can set the top position to the height.
here's the code:

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;
            }
        },

but the problem is, this process is fast except for getting the height of the element.
so without getting the height, the function takes about 20ms
but getting the height adds another 75ms to the process and makes it about 95ms
now my question is, how can I make the determination of the height a lot faster?

Answer 1

添加完第一轮图块之后，您可以存储不同行的高度。因此，下一次在您添加新图块时，它将可用，而无需计算或等待为了它。