繁体   English   中英

javascript-重新创建pinterest,例如网格

[英]javascript - recreation of pinterest like grid

我正在创建一个像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;
            }
        },

但是问题是,除了获取元素的高度之外,此过程非常快。
因此在不获取高度的情况下,该功能大约需要20毫秒
但是获取高度会增加75ms的时间,使其大约95ms
现在我的问题是,我怎样才能更快地确定高度?

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM