同位素/石工+ json飼料將所有元素加載到左邊

我有Isotope設置從JSON飼料中提取數據，並且在文檔準備好時它具有所有元素坐在左邊，垂直堆疊而不是在同位素/砌體佈局。同位素/石工+ json飼料將所有元素加載到左邊

如果我通過手動調整瀏覽器窗口的寬度稍微調整一下，它就會重新調整，所有內容都應該如何調整。

我按照這個例子http://jsfiddle.net/E7ZRW/37/但結果不一樣，我想知道爲什麼？

CSS

#social_container { 
    width: 100%; 
    padding: 30px; 
} 
.social_block { 
    background-color: #ffffff; 
    color: #000; 
    width: 320px; 
    margin: 5px; 
    /*float: left; setting left float doesn't fix the issue*/ 
}

$(document).ready(function() { 
    // 
    // initialize at ready ; 
    // 
    $('#container').isotope({ 
     itemSelector: '.block' 
    }); 

    var page = 1; 


    function loadPage(page) { 
       var url = 'http://example.com/getImages/' + page; 
       $.getJSON(url, function(data) { 
        var newElements = ""; 
        var item_count = 0; 
        //$.each(data.data, function(key, val) { console.log('Data key: ', key, ', Value: ', val)}); 
        $.each(data.data, function(index, obj) { 
         var item = obj.Message; 
         newElements += 
          '<div class="block">' + 
           '<span class="post_image"><img class="lazy" src="' + item.postImageLarge + '" data-original="' + item.postImageLarge + '" /></span>' + 
          '</div>'; 
          item_count = item_count + 1; 
          //console.log("items: "+item_count+" page:"+page) 
          if (item_count==20) { 
           page = page + 1; 
           loadPage(page); 
          } 
        }); 

        console.log("container width: " + $('#container').width()); //1024px 

        var $newElems = $(newElements); 

        $('#container').append($newElems).imagesLoaded(function() { 

         $('#container').isotope('appended', $newElems); 

         $("img.lazy").lazyload({ 
          effect : "fadeIn", 
          skip_invisible : false 
         }); 
        }); 
       }); 
    } 

    // Initial run with page empty. 
       loadPage(page); 

});

編輯：我想我在同位素設置這個初始化選項解決它：

masonry: { 
      columnWidth: 120 
     }

別的你們可以看到了我應該以更好的方式編碼？

來源

2014-06-25 DT.DTDG

解決使用

$('#container').isotope({ 
     itemSelector: '.block', 
     masonry: { 
      columnWidth: 120 
     } 
});

來源

2014-06-25 22:56:05

同位素/石工+ json飼料將所有元素加載到左邊

回答

相關問題