jquery Mauerwerk Bilder überlappen, bis eine Seite die Größe ist getan

Ich habe festgestellt, das template, das veranschaulicht das Problem, das ich habe mit jquery Mauerwerk Bild und layout. Werfen Sie einen Blick auf das twitter-bootstrap-Vorlage Seite:

Ersten Aufruf der Seite alle Bilder geladen sind, die auf einander gestapelt, bis eine Seite aktualisieren oder re-Größe ist getan. Die Bilder werden dann richtig angezeigt.

Hier ist mein HTML und jQuery, die hat das gleiche problem:

HTML

<div class="gallery-masonry masonry" style="position: relative; min-height:100px; height: auto;">
  <div id="loading">Loading ...</div>                            
</div>

jQuery

$.post("functions/photo_functions.php", { f: 'getallphotos'}, function(data) {

  $('#loading').hide();

    if(data) {  
      $.each(data.images, function(i, image) {
        var img_block = '<div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;">' +
        '<a href="#" class="thumbnail"><img src="'+image.url+'" alt=""></a>' +
        '<div class="actions">' +
        '<a title="" href="#" class="tip-top" data-original-title="Edit"><i class="icon-pencil icon-white"></i></a>' +
        '<a title="" href="#" class="tip-top" data-original-title="Remove"><i class="icon-remove icon-white"></i></a>' +
        '</div>' +
        '</div>';

        $(".gallery-masonry").append(img_block);
          });

        $('.gallery-masonry').masonry({
          itemSelector: '.item',
          isAnimated: true,
          isFitWidth: true
        });             
      }

    }, "json");

Irgendeine Idee, warum dies geschieht und wie könnte ich es beheben?

InformationsquelleAutor Paul | 2013-05-06
  1. 16

    Verwenden imagesLoaded (), um ausgelöst Mauerwerk nach alle Bilder geladen sind.
    (imagesLoaded() wird durch das Skript http://github.com/desandro/imagesloaded.)

    $('.gallery-masonry').imagesLoaded( function(){
  $('.gallery-masonry').masonry({
   itemSelector: '.item',
   isAnimated: true,
   isFitWidth: true
  });
});
    • ich erhalte eine Fehlermeldung .imagesLoaded is not a function
    • imagesLoaded() wird durch das Skript github.com/desandro/imagesloaded. Man braucht, um zu integrieren, diese als gut.
    • DANKE. Ich habe nur die normale Jquery. Sie können sehen, diese genauen code ausgeführt http://www.BitPixr.com nun. Behoben, dass der böse Blick-Startseite für neue Nutzer. THX.
    InformationsquelleAutor Tamil Selvan C
  2. 5

    Akzeptierte Antwort hat die fehlenden Schritte. So, hier ist eine Schritt-für-Schritt.

    1. Gehen Sie auf die imagesloaded repo und laden Sie die minified-version auf https://github.com/desandro/imagesloaded/blob/master/imagesloaded.pkgd.min.js.
    2. Hinzufügen, die Bibliothek zu Ihrem Projekt.
    3. Unten in Ihre Seite rufen Sie die Datei

    ``[Pfad anpassen, um Ihre javascript-Dateien]

    <script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/imagesloaded.pkgd.min.js"></script>

<script>
  $('.gallery-masonry').imagesLoaded( function(){
    $('.gallery-masonry').masonry({
     itemSelector: '.item',
     isAnimated: true,
     isFitWidth: true
    });
  });
</script>
    • ^^^^^ Dieser Kerl ist richtig. Sie müssen zum laden in den die Bilder geladen Paket. Es ist sehr einfach.
    InformationsquelleAutor JGallardo
Schreibe einen Kommentar