jQuery砌體和Ajax提取追加導致圖像重疊的項目

另一圖像重疊問題在這裏使用砌體和Ajax在Wordpress中追加項目。第一次追加更多項目時，圖像重疊。但是，當頁面重新加載時，圖像不再重疊。我在做一些研究後意識到這與計算圖像的高度有關。jQuery砌體和Ajax提取追加導致圖像重疊的項目

從砌體網站上的幫助頁面，建議使用getimagesize函數來指定圖像的寬度和高度。

但是，這是我卡住的地方。由於我對PHP的知識有限，我不知道如何利用這個函數或將它放在我的代碼中，所以我在這裏尋找一個小方向。任何人都可以幫我弄清楚如何將getimagesize函數集成到我的代碼中？

這裏是磚石代碼：

$(document).ready(function(){ 

    var $container = $('#loops_wrapper'); 

    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : '.post_box', 
     columnWidth: 302 

     }); 
     }); 
    });

這是AJAX取代碼：

$('.load_more_cont a').live('click', function(e) { 
    e.preventDefault(); 
    $(this).addClass('loading').text('Loading...'); 
    $.ajax({ 
     type: "GET", 
     url: $(this).attr('href') + '#loops_wrapper', 
     dataType: "html", 
     success: function(out) { 
      result = $(out).find('.post_box'); 
      nextlink = $(out).find('.load_more_cont a').attr('href'); 

      $('#loops_wrapper').append(result).masonry('appended', result); 
      $('.load_more_cont a').removeClass('loading').text('Load more posts'); 

      if (nextlink != undefined) { 
       $('.load_more_cont a').attr('href', nextlink); 
      } else { 
       $('.load_more_cont').remove(); 
      } 
     } 
    }); 
});

來源

2012-08-23 Anne Boleyn

您可以嘗試在這裏實現大衛DeSandro的計時方法爲附加圖片...

「正如在入門書中推薦的那樣，處理圖像的最佳解決方案是在img標籤中定義尺寸屬性，特別是在使用無限滾動時。在下面的例子中使用。

當然，在一些CMS中，這並不是一個可行的選擇，最值得注意的是Tumblr。在這種情況下，需要在新添加的圖像完全加載後調用砌體。這是通過延遲砌體回調做「

function(newElements) { 
    setTimeout(function() { 
    $wall.masonry({ appendedContent: $(newElements) }); 
    }, 1000); 
}

編輯：如果無法實現公共延遲想法與附加無限滾動的物品，你可以嘗試追加新項目，所以不是

後重裝

$('#loops_wrapper').append(result).masonry('appended', result);

那樣做

$("#loops_wrapper").append(result).masonry('reload');

來源

2012-08-23 14:13:46 Systembolaget

是否讓所有的圖像相同的寬度和高度？我忘了提，而寬度這不是一個問題，並且總是相同的，這是圖像的高度將會變化，並且是需要動態計算的。 –

對不起，沒有正確閱讀問題。 – Systembolaget

沒問題，我應該提到在我原來的帖子中身高會有所不同。我嘗試了你在我的js文件中發佈的代碼，但請原諒我的知識缺乏，我猜我需要更改一些變量以使其與我的代碼一起工作？仍然卡住。 –

jQuery砌體和Ajax提取追加導致圖像重疊的項目

回答

相關問題