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?
Aucun commentaire:
Enregistrer un commentaire