2012-03-19 13 views
8

JQuery duvarcılık kullanıyorum ve şimdi sonsuz kaydırma ekliyorum. Hemen hemen her duvarda "tuğla" görüntü var ve sonsuz kaydırma kullanmadan önce görüntüleri iyi yüklendi ve her şey harikaydı. Javascript'in bir sonraki parçasını sonsuz kaydırma için ekledim ve içerisine imagesLoaded yöntemini ekledim ama yeni tuğlalar eklendiğinde hepsinin üstüne yığıldılar. Benim varsayım, sonsuz kaydırma geri arama içinde imagesLoaded yöntemi düzgün eklemiyorum ama benim hata bulamadık. İşte ilk JQuery duvar arama düzgün çalışıyor ve dokunulamadı. Bir problem olduğu görülen ikinci bölüm. Yardımlarınız için teşekkürler ve daha fazla bilgiye ihtiyacınız varsa bildirin.imagesYılınan yöntem JQuery masonry ve sonsuz kaydırma ile çalışmıyor

+0

Ek bir gözlem, tabana doğru kaydırdığımda, sayfaların kaybolmadan önce bir an için sayfalandırma denetimlerini görmüyorum. Ayrıca, bir Sinatra uygulamasında will_paginate gem kullanıyorum. – wuliwong

cevap

12

Burada sorun Sonsuz kaydırma geri arama işlevi içinde $ kabın üzerine .imagesLoaded() çağırıyordu ve ben $ newElements üzerinde çağırmak gerekirdi oldu cevap

$(function(){ 

     var $container = $('#container'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector : '.tile', 
      columnWidth : 240 
      }); 
     }); 

    $container.infinitescroll({ 
      navSelector : '.flickr_pagination', // selector for the paged navigation 
      nextSelector : 'a.next_page', // selector for the NEXT link (to page 2) 
      itemSelector : '.tile',  // selector for all items you'll retrieve 
      loading: { 
       finishedMsg: 'No more pages to load.', 
       img: 'http://i.imgur.com/6RMhx.gif' 
      } 
      }, 
      // trigger Masonry as a callback 
      function(newElements) { 
      // hide new items while they are loading 
      var $newElems = $(newElements).css({ opacity: 0 }); 
      // ensure that images load before adding to masonry layout 
      $newElems.imagesLoaded(function(){ 
       // show elems now they're ready 
       $newElems.animate({ opacity: 1 }); 
       $container.masonry('appended', $newElems, true); 
      }); 
      } 
     ); 
    }); 

bu.

+1

Bu konuda yeni bir soru başlamanızı öneririm, sorunu gidermek için kodunuzu görmeniz gerekir. – wuliwong

İlgili konular