0

jQuery Masornyプラグインの使用を開始しました。それぞれ 190px の固定幅の画像を使用していますが、1 つの問題を除けば正常に動作します。当然、各列の下部にはギャップがあります。これらのギャップを背景で埋めたいと思います。コンテナに背景を設定すると、各要素間の gutterWidth の後ろにもなります。各列の下部にいくつかの空の div を追加する方法、または下部に隙間があるスタイルを可能にする何か他の方法はありますか?

私の石工初期コード:

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

フリーメーソンに関する他の質問とドキュメンタリーを調べましたが、言及されていないようです。

ありがとう

4

1 に答える 1

1

石積みはレンガを垂直方向に並べ替え、次に水平方向に並べ替えるため、各列の下部のギャップを埋める方法はありません。これは、ツリーマップ アルゴリズムに似た計算を追加したビン パッキング アルゴリズムに似ています。ビン パッキング アルゴリズムの考え方は、一定量のレンガを列に積み重ねるのに必要な列の数を最小限に抑えることです。これは np 完全な問題であり、当然、下部 (または上部) にギャップがあり、それらのギャップを埋めることはできません。

ツリーマップの場合、kd-tree を使用できます。適切な説明は、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 のパディングの問題に関する質問は簡単に説明できます。padding:8px; があります。html5 ドキュメントの body タグ内。そのため、画像と周囲の画像の間には、各辺 4px のギャップがあります。私の写真を見てください：

ここに画像の説明を入力

于 2012-07-20T02:02:40.480 に答える