JQuery砌體休息後的第一個圖像，加載與奇怪的差距

我在一個Tumblr主題實施砌體與無限滾動 - 我以前成功完成，但我不能讓這一個停止「打破」並散佈圖像。越來越絕望！JQuery砌體休息後的第一個圖像，加載與奇怪的差距

現場演示neuraldamage-theme4.tumblr.com（密碼是客人）。

我試過從body標籤除了#posts div和它的內容（當然還有腳本），但是問題仍然存在 - 所以它看起來像這不應該是一個問題周圍的divs。

這裏是我的腳本：

$(document).ready(function() { 
    $('#post-video iframe').attr('width', '300'); // resize embedded videos 
}); 

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

$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector : '.post', 
     columnWidth : 300 
    }); 
}); 

$container.infinitescroll({ 
    navSelector : '#pagination', // selector for the paged navigation 
    nextSelector : '#pagination li a.pagination_nextlink', // selector for the NEXT link (to page 2) 
    itemSelector : '.post',  // selector for all items you'll retrieve 
    loading: { 
     finishedMsg: '', 
     img: 'http://static.tumblr.com/6u5yyqj/iUtmgivzo/loading.gif', // http://static.tumblr.com/6u5yyqj/iUtmgivzo/loading.gif, http://static.tumblr.com/6u5yyqj/yWkmgj1jq/loadingdark.gif 
    } 
    }, 
    // trigger Masonry as a callback 
    function(newElements) { 
     var $newElems = $(newElements); 
     $container.masonry('appended', $newElems); 
    } 
);

這裏就是我有嵌入，只要確定它是所有最新的：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://static.tumblr.com/6u5yyqj/MPKmktfkv/jquery.masonry.min.js"></script> 
<script src="http://static.tumblr.com/6u5yyqj/nsQmkth3k/jquery.infinitescroll.min.js"></script>

如果你'd喜歡看完整的代碼：gist.github.com/neuraldamage/5307289

如果有人可以對此採取措施，我會非常感激！

來源

2013-04-06 Nails

附註：不要使用您的jquery.easing的cloudflare cdn。它沒有加載並導致頁面掛起。 – graygilmore 2013-04-07 21:05:37

謝謝你讓我知道 - 我會把它託管在別的地方。 – Nails 2013-04-08 14:45:07

它遇到了一堆問題，因爲您實際上在頁面上有多個<div id="posts">。你的Tumblr代碼可能會出現比應該更多的問題。

來源

2013-04-07 21:07:48 graygilmore

就是這樣！出於某種原因，即使它僅在我的HTML中出現過一次（我實際上粘貼到Tumblr中的HTML，而不是您在頁面上查看源代碼時看到的HTML），它仍會多次重複遍歷整個「帖子」div。對我來說這是一個完全神祕的原因 - 我開始使用相同的HTML骨架（以及之前成功使用的舊版腳本），並且這次沒有任何問題。謝謝！ – Nails 2013-04-08 14:44:23

的問題是這樣的：

<div id="posts" style="position: relative; height: 483px;" class="masonry">

改變這樣的高度，以適應您的內容（因爲它不是足夠大），或者乾脆不宣佈它在所有。

當我檢查元素時，我只是刪除了height值，所有東西都移動到位。

來源

2013-04-06 05:56:30 couzzi

這是事情，我不宣佈。 #posts div上幾乎沒有樣式。我試過使用身高：100％，甚至絕對定位，但沒有骰子。 – Nails 2013-04-06 05:58:45

我很害怕這個。最好的選擇是調試它並隔離計算該值的插件的行，然後找出爲什麼它沒有正確執行。更快（更骯髒）的解決方案是在插件開展業務後以編程方式自己改變高度*在你設定的回調中。最髒的選項仍然是可行的，那就是在你的css中聲明'#posts {height：100％！important;}'這個**會起作用，但是不鼓勵它。 – couzzi 2013-04-06 06:03:48

謝謝，但是......我嘗試了最骯髒的解決方案（因爲其他兩個都超出了我的JS技能），現在他們都是一團糟。更新了現場演示。 – Nails 2013-04-06 06:11:55

JQuery砌體休息後的第一個圖像，加載與奇怪的差距

回答

相關問題