2

ピンタレストのようなレイアウトのデザインに wookmark js を実装しようとしています。しかし、ページ内の wookmark の通常の 1 つのインスタンスではなく、ページに 2 回適用する必要があります。しかし、私は問題を抱えています。最初の行が配置されると、2 番目の行が下に押し込まれすぎて、間に空きスペースができます。

赤と青の行の間に空白の空白が表示されます。

赤と青の行の間に空白の空白が表示されます。青い行を赤い行のすぐ下から開始したい。

これが私のフィドルです。http://jsfiddle.net/u3ndne03/1/

HTML

<div class="wookmark">
    <div class="singleitem red">s</div>
    <div class="singleitem red">s</div>
    <div class="singleitem red">s</div>
    <div class="singleitem red">s</div>
    <div class="singleitem red">s</div>
</div>        

<div class="wookmark">
    <div class="singleitem blue">s</div>
    <div class="singleitem blue">s</div>
    <div class="singleitem blue">s</div>
    <div class="singleitem blue">s</div>
    <div class="singleitem blue">s</div>
</div>

CSS

.wookmark {
    position: relative; /** Needed to ensure items are laid out relative to this container **/
    margin: 0;
    padding: 0; 
}
.singleitem{
    border:1px solid #000;
    background:red;
    width:60px;
    height:60px
}
.red {
    background:red;
}
.blue {
    background:blue;
}

JS

$('.wookmark .singleitem').wookmark({
    autoResize: true, // This will auto-update the layout when the browser window is resized.
    container: $('.wookmark'), // Optional, used for some extra CSS styling
    offset: 5, // Optional, the distance between grid items
    itemWidth: 60, // Optional, the width of a grid item
});

アイデアフレンドはいますか？

4

1 に答える 1

1

問題は、各インスタンスが共通のコンテナー要素を共有していることです。wookmark がこのようなケースを処理するように設計されているようには見えません。HTML を変更せずに考えられる解決策の 1 つは、要素をループして.wookmark親要素のコンテキストを取得し、それを次のようにコンテナー要素として渡すことです。

更新された例はこちら

$('.wookmark').each(function () {
    var parent = $(this).closest('.wookmark');
    $(this).find('.singleitem').wookmark({
        autoResize: true,
        container: parent,
        offset: 5,
        itemWidth: 60,
    });
});
于 2014-08-31T21:12:11.633 に答える