4

誰かが私がプロジェクトに使用しているパッカリーの経験を持っていることを願っています.

水平レイアウトが機能しません。HTML で packery オブジェクトを宣言すると、ある程度は機能するようです。

<div class="packery js-packery" data-packery-options='{ "isHorizontal": true }'>
...
</div>

ドキュメントが示唆するように、CSSを介して幅と高さが変更されていないように見えますが。しかし、Javascript を使用する必要があるため、これ以上掘り下げる必要はありません。そして、同等のものはまったく機能していないようです:

$('.packery').packery({
    itemSelector: '.item',
    isHorizontal: true,
});

これにより<div>、packery オブジェクトが高さ 0px、幅 4px に割り当てられた要素が生成されます。(4px の幅は、おそらく一部の項目の 1px の境界線に由来します。) packery のドキュメントによると、水平レイアウトでは高さを設定する必要があります。しかし、packery が HTML または Javascript で初期化されたかどうかに関係なく、ドキュメントによって提供される CSS は何もしないようです。

/* containers need height set when horizontal */
.packery.horizontal {
    height: 200px;
}

それでも、挿入したアイテムは表示されず、パッカリ<div>は 4px x 0px です。そこで、Javascript でコンテナーの高さを強制しました。

$('.packery').css('height', '400px');

これにより、要素の高さが増加しますが、幅は 4 のままです。したがって、すべての要素は本質的に幅がゼロであり、見えません。そこで、コンテナの幅を強制しようとしました:

$('.packery').css('width', '1000px');

しかし、この幅は無視されているようです。<div>Chrome の開発者モードで要素エディターを使用して の幅を強制することができます。これにより、醜いコンテンツが表示されます。<div>しかし、Javascript で の幅を設定するにはどうすればよいですか? の呼び出しの前または後に、packery が設定した幅をオーバーライドしているようpackery()です。

packery のすべては、垂直レイアウトに最適に機能するようです。しかし、私は本当に水平レイアウトを使用したいのですが、明らかに何か間違っています。誰でも助けることができますか？

4

1 に答える 1

1

isHorizo​​ntal オプションでも同様の問題がありました。パッカリーの周り!importantの幅にCSSのタグを使用して解決しました。div

于 2015-10-29T22:33:14.837 に答える