在目录网站上使用砖石.默认情况下,显示的项目按日期排序,然后按部件号排序.我的图像变化很大.问题是,如果我错了,请纠正我,Masonry将第2行,第1项设置在第1行中最短的项目下方,而不是页面左侧.所以换句话说,当我的数据库返回一个特定的顺序时,Masonry将那些从上到下的顺序排列(当变化的高度)时,而不是从左到右.
文档中没有找到任何东西来控制它.有没有办法强制砌体将物品从左到右依次按垂直方向垂直放置?
我试图张贴插图,但显然我没有资格这样做.这里有一个图示的链接:
解决方法
在Masonry中没有选择排序项目,因为它是一个简单的插件,将砖块逐个放置.选择新的砖头位置很简单:尽可能地放置更高的位置.
但是,在这种情况下可以做的是通过添加一个定义排序的两行来改变脚本,假设所有砖块的宽度相同(例如,总共为5行).
为了演示这个,我使用jQuery Masonry(被压缩),你可以在this Fiddle中查看.
JS
$.Mason.prototype._placeBrick = function(e) { var n = $(e),r,i,s,o,u; r = Math.ceil(n.outerWidth(!0) / this.columnWidth),r = Math.min(r,this.cols); if (r === 1) s = this.colYs; else { i = this.cols + 1 - r,s = []; for (u = 0; u < i; u++) o = this.colYs.slice(u,u + r),s[u] = Math.max.apply(Math,o) } var a = Math.min.apply(Math,s),f = 0; for (var l = 0,c = s.length; l < c; l++) if (s[l] === a) { f = l; break } /* Add new calculation,what column next brick is in: */ f = $(e).index() % this.cols; /* Get col index f: Just divide with element's index */ a = s[f]; /* This is current height for f-th column */ /* END of customizing */ var h = { top: a + this.offset.y }; h[this.horizontalDirection] = this.columnWidth * f + this.offset.x,this.styleQueue.push({ $el: n,style: h }); var p = a + n.outerHeight(!0),d = this.cols + 1 - c; for (l = 0; l < d; l++) this.colYs[f + l] = p; };