問題タブ [packery]

packery を使用して、水平スクロール、ドラッグ可能/並べ替え可能なリストを作成しようとしています。

基本的に、このコードペンの水平バージョンを作成したい: http://codepen.io/desandro/pen/cbhDG

私はそれを変更しようとしましたが、問題なくスクロールバーを使用して水平方向のリストを取得できます。問題は、packery を適用するとすぐに、セルを垂直方向にラップしたいので、オーバーフローを削除するように見えることです。方法が見つかりません。パッカリーコンテナのサイズを制御する

ここに私の試みがあります： http://codepen.io/anon/pen/dPYXJG

ハムル:

CSS:

JavaScript:

どんな助けでも大歓迎です。乾杯。

これは私のコードペンです: http://codepen.io/helloworld/pen/JoKmQr

サーバーからデータの配列を取得すると仮定しましょう。データにはタイトルと注文番号があります。

orderNumber が 1 から 5 までの 5 つの配列項目があります。

ここで、各 div が packery レイアウト システムの特定の場所に配置される 5 つの div をレイアウトしたいと考えています。

この画像を参照してください。

色は重要ではありません。重要なのは、順序番号に応じた div の順序です。

orderNumber の流れは、上から下へ、左から右へと進みます。

質問:

レイアウト システムで div の順序を決定するにはどうすればよいですか? 必要なフローに自動的にレイアウトされますか? または、手動で注文することについてのヒントも問題ありません:-)

HTML

CSS

JS

ゆっくりと永続的に左に移動したいフルページの Packery があります。それはすべて問題なくダンディですが、OSX (任意のブラウザー) では、アニメーションに時折ぎくしゃくすることがあります.

より良い解決策がないためtranslateX、Packery コンテナーの から 101 ミリ秒ごとに 1 を引いています。これは、プロパティの線形 0.1 秒遷移によって平滑化されtransformます。

実際には;

Javascript

CSS

ぎくしゃくしているのは、遷移アニメーションと間隔減算が何らかの形で干渉しているためだと感じています。ただし、これは Windows の問題ではないようです。

ぎくしゃくを直す方法はありますか？同じ効果を達成するためのより良い/よりスマートな方法はありますか?

isotope metafizzy packery のバージョンに問題があります:

ここにjsバージョンv1.1.0があります= http://isotope.metafizzy.co/layout-modes/packery.html

ここにjsバージョンv1.3.2 = http://packery.metafizzy.co/があります

しかし、私のコードはこの v1.1.0 コードでのみ動作します:

どうすればjsコードを更新できますか? ありがとう

私はアマチュアで初心者で、同じ高さの縦横の写真用の流動的な画像グリッドを使用して最初の Web ページを作成しようとしています。そのため、Packery JavaScript を適用して応答性を高めています。

Codepen へのリンクを参照してください: http://codepen.io/nor159/pen/WbpWpe/?editors=110

私は2つの問題を見つけました：

1) 画面のサイズを変更すると、画像間に隙間がランダムに表示されます。

2) Chrome で読み込むと、画像が重なって表示されます。

これを解決する方法を知っている人はいますか？このグリッドは Packery を使用して作成できますか?

私の質問への回答は高く評価されます。

よろしくヤン、オスロ