Склад масонства не запускается до тех пор, пока окно не будет изменено.

Question

Я начинаю изучать кирпичную кладку совсем недавно. Я хочу использовать масонство для макета моего сайта, все работает отлично, но есть проблема.

Я сделал код для изменения размера окна. когда кто-то изменит размер окна, измените ключ макета на ширину страницы. Я не делал этого с масонством, поэтому я сделал это с помощью этого кода. Но когда я запускаю этот код, что-то пошло не так, а масонский макет меняет следующие размеры окон. Я не знаю, где проблема.

Здесь jsfiddle демонстрация: DEMO

<script> 
var doit; 
window.onresize = function myFunction() { 
clearTimeout(doit); 
doit = setTimeout(function() { 
    resizedw(); 
}, 1001);} 


function resizedw(){ 
var w = window; 
var d = document; 
var e = d.documentElement; 
var g = d.getElementsByTagName('body')[0]; 
var originalwidth = w.innerWidth || e.clientWidth || g.clientWidth; // sayfa boyutu 
var orpagewidth = parseInt(originalwidth/200); 

    var csswidth = $('#section_bg').css('width'); //returns 20px 
var parsedcsswidth = parseInt(csswidth); //returns 20 div boyutu 
var orcsswidth = parseInt(parsedcsswidth/200); 

if (parsedcsswidth != originalwidth){ 
if (parsedcsswidth > originalwidth){ 
    $(".section_bg").animate({width:orpagewidth*200}, 500);} 

if (parsedcsswidth < originalwidth){ 
    $(".section_bg").animate({width:orpagewidth*200}, 500);} 
} 
} 
</script> 

Answer 1

Удалены 1200px шириной и добавил идентификатор контейнера к элементу, содержащий использовать · блоги, · в качестве селектора кладки. Проверьте скрипку, приведенную ниже, заменил все JS с простым кодом кладки (он делает расчеты изменения размера для вас)

$('#container').masonry({ 
    columnWidth: 190, 
    gutter: 10, 
    isAnimated: true, 
    itemSelector: '.blogpost', 
    isFitWidth: true 
}); 

Fiddle

EDIT: Если вы хотите, · блоги, · быть в центре вы можете установить isFitWidth истина , обновил скрипку, чтобы показать это