3

これは StackOverflow に関する私の最初の質問です。

この問題を自分で解決しようと数日を費やしましたが、役に立ちませんでした。問題を解決するために、stackoverflow と他の場所の両方で見つかったコードのスニペットをいくつか試しました。

Skeleton と Masonry を組み合わせてポートフォリオ サイトを構築しています。ポートフォリオを最初に読み込むと、小さな画像が 1 つしかありません。初めてサイズを変更すると、すべての列が表示されますが、画像が重なります。再度サイズを変更すると、ほとんどのタイルの高さは正しくなりますが、長いタイル (JSTOR) はまだ切り取られています。3 回目のサイズ変更 (およびその後のすべての訪問) で、タイルが正しく表示されます。

（（編集：ページの更新時（リンクを再度クリックするのではなく、ブラウザの更新）、グリッドも不安定になります....すべての列が表示されることもありますが、一部の画像が積み重ねられ、1つの小さな画像のみが表示されることもあります。））

私は JS や jQuery について十分に理解しているわけではないので、修正しようとする試みの多くは不器用だったかもしれません。この時点での私の仮定は、イメージがロードされる前に石積みがグリッドを作成していることです...これを修正するために、Desandro 自身のイメージロード スニペットや、このような StackOverflow の他の応答など、さまざまなコードを試しました

現在、私のサイトはnew.rdhalexander.comにあるはずです。他にどのような情報が必要なのかわかりません....しかし、私はこれを注意深く見守っています.

4

3 に答える 3

7

更新: @Stefan と彼の例を参照してください。どうやら新しい方法があるようです。

石工がサイズを取得することを決定する前に、画像が完全にロードされていないようです。

いくつかの単純な css でテストできますが、おそらくロードの遅延が見られるでしょう。

.tile {
   position:relative !important;
}

また、次のような長いタイムアウトを試してください

setTimeout(function(){
  .. masonry blah ..
},1000);

次に、タイミングの問題を解決するために、これがメーソンリーの著者の提案です。

$(window).load( function(){   $('#content').masonry(); });

リンク

于 2013-08-19T16:55:01.587 に答える
3

誰かがGoogleからここに来た場合、サイズ変更イベントを手動で強制する以外に何もうまくいきませんでした

window.dispatchEvent(new Event('resize'));
于 2016-01-19T03:09:29.287 に答える