3

持つ要素もあるclass='snap'

私はこれらの要素を体内で見つけたいと思っています。次にsnap、resize要素をグリッドに合わせますJquery。

When?

  • ドキュメントの準備ができました。
  • ウィンドウのサイズが変更されます。

Note:

  • グリッドセルのサイズは10px
  • 要素の内容は異なる場合があります。
  • 要素は 1 セル サイズで最大下に移動できます。(アップは不可)。
  • レスポンシブ要素のため、幅と高さを指定して要素をスナップすることは正しくありません。

JsFiddle を参照してください

ここに画像の説明を入力

どんなアイデアや助けも大歓迎です。

JsFiddle が更新されました:.content inの幅が削除さCSSれましnot specifiedた。

4

1 に答える 1

0

あなたができることは、これは完璧なアイデアにすぎず、offsetdivを取得し.snapてすべてのマージンを削除することです。次に、次の (右と下の) 行にスナップします。

var Content = {
    snapElement: function(element){
        offset = element.offset();
        element.css('left', (Math.ceil(offset.left/10)*10)+'px');
        element.css('top', (Math.ceil(offset.top/10)*10)+'px');
        element.css('margin', '0');
    },
    snapElements: function(){
        var elements = $("body").find(".snap");
        elements.each(function(){
            Content.snapElement($(this));
        });     
    }
}

.snapまた、 div を相対にする必要があります。

.snap {position:relative;}

デモ

余白を維持することもできますが、余白を と に差し引く必要がleftありtopます。

編集：処理するより洗練されたデモwidth

于 2013-09-03T12:17:27.797 に答える