問題タブ [jquery-masonry]

Masonry Tumblelog のレイアウトを調整して、1 列の幅が 320px になり、2 列または 3 列の幅がその倍数になるようにして、iPhone 以降で動作するようにします。

メディア クエリを使用して、すべての列を iPhone の 320 まで押しつぶしています。それは一種の作業です。つまり、積み重ねて 1 つの列に減らしています。問題は、iPhone の画面では小さく、幅の約 5 分の 1 しかカバーしていないことです。div から css 要素をたどりましたが、メディア クエリですべて 320 に設定されています。サイトはhttp://www.4pixels.comです。何か案は？

最近、MasonryおよびIsotopeJQueryプラグインを発見しました。それらは機能的にほぼ同一であるように見え、両方とも同じ作者を持っているように見えます。私が見ることができる唯一の明らかな違いはライセンスです。

機能面でこれら2つの主な違いは何ですか？なぜあなたは一方を他方の上に使うのですか？

このチュートリアルの影響を強く受けた無限スクロール効果を実装しています。

http://railscasts.com/episodes/295-sharing-mustache-templates?view=asciicast

ただし、フロント エンドで Jquery Masonry (http://masonry.desandro.com/demos/adding-items.html) を使用しているため、少し異なる方法で行っています。

とにかく、これを次のように実装すると：

次のエラーが表示されます (Chrome):

キャッチされないエラー: NOT_FOUND_ERR: DOM 例外 8

問題はここにあると思います：

これは、各テンプレート出力を「引用符」で囲むためです。

それよりも：

しかし、私は自分が間違っていることについて少し精神的なブロックを抱えています....誰か助けてくれる人はいますか?

jQuery MasonryとIsotopeプラグインの両方を試しましたが、希望するレイアウトを実現できないようです。

どちらのプラグインも、前の行の要素の高さに基づいて「次に利用可能なスペース」を計算するようです。例えば：

この例では、アイテム #6 は、#4 の高さが #2 の高さよりも小さいため、右端に移動します (移動したい場所)。

私が実現したいレイアウトは、左フローティング要素に似ています。

上記の 2 つのプラグインでこのレイアウトを実現するためのオプションはありますか、それとも別のプラグインを利用できますか?

イベントに費やすコンテンツ（ビデオ+テキスト）を含むボックス（すべて同じサイズ）を表示するページを含むサイトを作成していますclick()。このページでは、石積みを使用して、ボックスを開いたり閉じたりすると、ボックスを再編成しています。このページは、fudgeyがこのデモを提供したこの投稿に大きく基づいています。

私の場合はほぼ100％正常に動作しますが、ボックスが拡張するとアニメーションのバグが発生します。ボックスは拡張し、少し収縮し、永久に拡張するようです。これらすべてがほんの数秒で完了します。ページはworpdressで実行されて投稿をロードし、scrollToを使用して、ボックスが展開された後、ウィンドウを正しい位置にスクロールし、vimeo'apiを使用してボックス内のビデオを外部から制御します。

動作を複製するためにjsfiddleを設定しました。$('#grid').masonry();この行にコメントすると、アニメーションで$('.box').click(function(){正常に機能しますが、もちろん再編成アニメーションを強制終了することに気付きました。

私は解決策が非常に近いと確信していますが、私はそれを釘付けにすることができないようです。

サイトのライブデモはここで見ることができます。

前もって感謝します。

開発しようとしているサイトに問題がありますデバッグにもかかわらずmasonoryのロードが適切に行われない場合がありますエラーやアピールファイルや関数呼び出しがありませんページをリロードするとすべてがうまくいく場合があり、位置の計算がサイトにない場合があります：http ：//walter.testsstaging.com/site/ 問題の画面を印刷： http ：//walter.testsstaging.com/masonory.png ありがとうございます

プロジェクトで素晴らしい JQuery Isotope プラグインを使い始めました。すべてがうまく機能しますが、コーナー スタンプ オプションに 1 つの問題があります。

私のマスノリー グリッドの各要素は、固定幅 (220px + 5 マージン) とランダムな高さ (コンテンツに応じて) を持ち、CSS ファイルで @media クエリを使用して、異なる画面解像度で列数を変更しています (ページ幅は 230、460 にすることができます)。 、690..など)。

コーナー スタンプの問題は、最も狭いバージョン (1 列) で発生します - コーナー スタンプは同位元素で覆われています...

このデモの Isotope 公式ページでも同じ問題が発生します: http://isotope.metafizzy.co/custom-layout-modes/masonry-corner-stamp.html (ウィンドウを狭くすると、大きな赤い四角形が他の Isotope 要素の後ろに隠れます) .

Masnory プラグインのデモ サイトにあるように、正常に動作することがわかりました。 http://masonry.desandro.com/demos/corner-stamp.html

Masnory から Isotope にサイト スクリプトをコピーするために既に組み合わせましたが、JS/jQuery があまり得意ではないのでうまくいきませんでした :/

自分のサイトにフィルタリング オプション (Masnory プラグインでは利用できない) を持たせたいので、Isotope で機能するのは素晴らしいことです。

javascript変数を使用して、jQueryMasonryプラグインのcolumnWidth変数を計算したいと思います。ページでソースを表示すると、変数の値ではなく、JavaScriptに変数名が表示されます。

http://jsfiddle.net/robflate/fS2yL/

ありがとう

このサイトが jQuery Masonry プラグインを使用してレスポンシブで流動的なレイアウトを実現する方法を提案できる人はいますか?

http://tympanus.net/codrops/collective/collective-2/

具体的には;

ブラウザーのサイズ変更で列の数が 3 から 2 から 1 に変化します。これは、石積みを使用するサイトに期待されることですが、興味深いのは、列のサイズも変更されて、使用可能な全幅を常に埋めることです。私が見た他のほとんどの石工サイトでは、列の数が変わると列の右側にギャップが残ります (例: http://masonry.desandro.com/ ) または、列が全幅を埋めますが、列の数は同じままです( http://masonry.desandro.com/demos/fluid.html )。CSS メディア クエリと組み合わせてブラウザのサイズ変更で列数を動的に設定していますか、それとも CSS3 列を使用していますか?

ありがとう。