jQuery獲取發佈寬度以修復無限滾動？

Question

詹姆斯在這裏。這個問題涉及（我）之前發佈的那個問題。我結束了（最後）得到一個與jQuery寬度一起工作的工作腳本，但當無限滾動加載新帖時它不工作。我使用的腳本是：

<script type="text/javascript"> 
     $(function() { 
      var cwidth = $(document).width() - 150; 
      var pwidth = cwidth - 120; 
      var ewidth = (pwidth - 150)/5; 
      var twidth = ewidth - 30; 
      var awidth = ewidth - 30; 
      $("#container").css("width", cwidth); 
      $("#posts").css("width", pwidth); 
      $(".entry").css("width", ewidth); 
      $(".text").css("width", twidth); 
      $(".photo").css("width", ewidth); 
      $(".audio embed").css("width", awidth); 
     }); 
     $('p:has(a.tumblr_blog)').remove(); 
    </script> 
    <script src="http://masonry.desandro.com/jquery.masonry.min.js"></script> 
    <script src="http://static.tumblr.com/twte3d7/FkIlzxaul/infinitescroll.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      var $container = $('#posts'); 
      $container.imagesLoaded(function(){ 
       $container.masonry({ 
        itemSelector: '.entry', 
       }); 
      }); 

      $container.infinitescroll({ 
       navSelector : '#page-nav', 
       nextSelector : '#page-nav a', 
       itemSelector : '.entry', 
       animate: true, 
       loading: { 
        finishedMsg: 'No more pages to load.', 
        img: 'http://i.imgur.com/6RMhx.gif' 
       } 
      }, 
      function(newElements) { 
       var $newElems = $(newElements).css({ opacity: 0 }); 
       $newElems.imagesLoaded(function(){ 
        $newElems.animate({ opacity: 1 }); 
        $container.masonry('appended', $newElems, true); 
       }); 
      }); 
    }); 
</script> 

我如何使它所以$(".entry").css("width", ewidth); $(".text").css("width", twidth); $(".photo").css("width", ewidth); $(".audio embed").css("width", awidth);都得到實現，從而在新的職位是通過無限滾動加載，職位是正確的寬度是多少？如果有人可以提供腳本，這將非常有幫助。頁面例如：http://jamescharless.tumblr.com

Answer 1

你需要把你的CSS爵士樂到它自己的函數，然後初始化它動畫前右不透明度：1。

@Alexander在$ newElements上也可能正確使用.filter。你應該做一個console.log（$ newElements）;看他們是如何被包裝的。

不管怎麼說，不假思索優化或最佳實踐，下面應該工作（只使用一個$（函數（）{}）;）：

var $container = $('#posts'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ itemSelector: '.entry' }); 
}); 

var cssFix = function() 
{ 
    var cwidth = $(document).width() - 150; 
    var pwidth = cwidth - 120; 
    var ewidth = (pwidth - 150)/5; 
    var twidth = ewidth - 30; 
    var awidth = ewidth - 30; 
    $("#container").css("width", cwidth); 
    $("#posts").css("width", pwidth); 
    $(".entry").css("width", ewidth); 
    $(".text").css("width", twidth); 
    $(".photo").css("width", ewidth); 
    $(".audio embed").css("width", awidth); 
} 
cssFix(); 

$container.infinitescroll({ 
    navSelector : '#page-nav', 
    nextSelector : '#page-nav a', 
    itemSelector : '.entry', 
    animate: true, 
    loading: { 
    finishedMsg: 'No more pages to load.', 
    img: 'http://i.imgur.com/6RMhx.gif' 
    } 
}, 
function(newElements) { 
    var $newElems = $(newElements).css({ opacity: 0 }); 
    $newElems.imagesLoaded(function(){ 
    cssFix(); 
    $newElems.animate({ opacity: 1 }); 
    $container.masonry('appended', $newElems, true); 
    }); 
}); 

Answer 2

我認爲（未經測試），這是你需要做什麼：

$container.infinitescroll({ 
    ...  
}, 
function(newElements) { 
    var $newElements = $(newElements); 
    var cwidth = $(document).width() - 150; 
    var pwidth = cwidth - 120; 
    var ewidth = (pwidth - 150)/5; 
    var twidth = ewidth - 30; 
    var awidth = ewidth - 30; 
    $newElements.filter(".entry").css("width", ewidth); 
    $newElements.filter(".text").css("width", twidth); 
    $newElements.filter(".photo").css("width", ewidth); 
    $newElements.filter(".audio embed").css("width", awidth); 
    $("#posts").masonry('appended', $newElements); 
});