0

画像を正しくロードするために Masonry のレイアウトを取得する際に問題が発生しています。私は JavaScript を初めて使用するので、助けとアドバイスをいただければ幸いです。imagesLoaded を試してみましたが、正しく動作させるのに問題があります。これは主に、適切な JavaScript を適切な場所に配置しているかどうか確信が持てないためです。

これは、サイトhttp://imagesloaded.desandro.com/から取得した、loadedImages の JavaScript です。

$('#container').imagesLoaded( function() {
});

$('#container').imagesLoaded( {

  },

function() {
}
);

$('#container').imagesLoaded()
  .always( function( instance ) {
    console.log('all images loaded');
  })
  .done( function( instance ) {
    console.log('all images successfully loaded');
  })
  .fail( function() {
    console.log('all images loaded, at least one is broken');
  })
  .progress( function( instance, image ) {
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( 'image is ' + result + ' for ' + image.img.src );
  });

これを masonry.js として保存し、html 内にロードしました。

masonry.pkgd.min.js 内で、次のように記述しました。

$('.grid').masonry({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',

  // use element for option
  columnWidth: '.grid-sizer',
  percentPosition: true,

})

石積みは機能しますが、ページを更新するとレイアウトが崩れます。ブラウザを調整すると、自動的に修正されます。何が起こっているかを示すウェブサイトは次のとおりです。 http://www.elraymond.com/

繰り返しになりますが、これを正しく行うためのアドバイスや指針は非常に高く評価されます。

ありがとう

4

1 に答える 1

-1

問題は、石積みが呼び出される前に画像が完全にロードされていないことだと思います...おそらく、画像がロードされたファイルに何か問題があります...

それでも、このライブラリが必要だとは思いません...次のコードで新しいjsファイルを作成し、石工ファイルの後に含めてみてください

$(window).on('load', function(){
    $('.grid').masonry({
      // set itemSelector so .grid-sizer is not used in layout
      itemSelector: '.grid-item',

      // use element for option
      columnWidth: '.grid-sizer',
      percentPosition: true,

    })
});

多くの場合、これらのライブラリは実際には必要ありません.... jQuery .on('load') 関数はそのような場合のためのものであり、同じことを行います...唯一の違いは、画像だけでなく、ページが読み込まれます...

于 2016-11-02T14:25:08.340 に答える