jquery砌体高度 - 在容器底部填充间隙
我已经开始使用jQuery Masorny插件,我使用固定宽度为190px的图像,并且它在一个问题旁边工作正常。当然,每列的底部都有空白,我想用一些背景填补这些空白。 如果我将背景设置为容器,那么它也会影响每个元素之间的gutterWidth。有没有办法在每列的底部添加一些空的div,或者其他可以让底部空白的样式?jquery砌体高度 - 在容器底部填充间隙
我砌体初始化代码:
jQuery(document).ready(function(){
var $gal = jQuery('#gallery');
$gal.imagesLoaded(function(){
$gal.masonry({
itemSelector : '.item',
columnWidth: 190,
isFitWidth:true,
gutterWidth:2
});
});
});
下面是这个工作演示,也有什么,我尽量做到截图:
http://maorb.dyndns-ip.com/masonrytest
我看了其他关于砌体问题以及文件中的问题,似乎没有提到。
由于
没有一种方法来填充在每一列的底部的间隙,因为砌筑排序在垂直顺序的砖,然后在水平方向顺序。它类似于装箱算法,其中一些附加数学与树图算法类似。 bin-packing alogrithm的想法是尽可能减少固定数量砖块堆积在柱子中所需的柱子数量。这是一个完整的问题,当然你在底部(或顶部)有间隙,这些间隙不能填充。
对于树形图,您可以使用kd树。一个很好的描述在这里:http://www.blackpawn.com/texts/lightmaps/default.html。
{
Node* child[2]
Rectangle rc
int imageID
}
Node* Node::Insert(const Image& img)
if we're not a leaf then
(try inserting into first child)
newNode = child[0]->Insert(img)
if newNode != NULL return newNode
(no room, insert into second)
return child[1]->Insert(img)
else
(if there's already a lightmap here, return)
if imageID != NULL return NULL
(if we're too small, return)
if img doesn't fit in pnode->rect
return NULL
(if we're just right, accept)
if img fits perfectly in pnode->rect
return pnode
(otherwise, gotta split this node and create some kids)
pnode->child[0] = new Node
pnode->child[1] = new Node
(decide which way to split)
dw = rc.width - img.width
dh = rc.height - img.height
if dw > dh then
child[0]->rect = Rectangle(rc.left, rc.top,
rc.left+width-1, rc.bottom)
child[1]->rect = Rectangle(rc.left+width, rc.top,
rc.right, rc.bottom)
else
child[0]->rect = Rectangle(rc.left, rc.top,
rc.right, rc.top+height-1)
child[1]->rect = Rectangle(rc.left, rc.top+height,
rc.right, rc.bottom)
(insert into first child we created)
return Insert(img, pnode->child[0])
您的htmlx和html5填充问题的问题很容易解释。你有一个填充:8px;在html5文档的body标签中。所以图像与每边4px的周围图像之间存在差距。看到我的图片:
感谢Chiyou,我知道这一点,我同意底部的空白已经最小化了。不过,我想知道是否有办法让我们说在图像下方每列的底部添加一个空的div,并使该div的空白高度为该列中的最后一个图像,直到容器的底部边界。那么该div也可以添加背景。我试图看看也许是一个JS方法来计算这些高度,但还没有弄清楚这一点。 – 2012-07-20 02:15:17
它最大化不会最小化。你想最大化你的利润而不是最小化。这是不可能的,或者你必须编写自己的算法。 – Bytemain 2012-07-20 02:22:06
我的意思是通过网格将间隙最小化,从而使边缘处的底部(或顶部)间隙最小化。你是否熟悉另一个jQuery/JS插件,可以支持这种“封闭”的边缘? – 2012-07-20 02:29:09
你能解释为什么它自然会在底部有空隙吗?砌体中的每块砖可以像墙壁一样粘在一起,并且墙壁没有间隙? – Bytemain 2012-07-20 00:34:43
是的,砖块粘在一起,但看起来图像高度的总和并不总是与容器的高度完全一样,所以它的余下部分变成了每一列底部的这些间隙。 – 2012-07-20 01:53:50