jQuery Масонство и медиа-запросы - responsiv

Question

Я пытаюсь использовать масонство jQuery в отзывчивом дизайне и не работает должным образом.
Иногда требуемое количество столбцов не отображается.

Пример:
Windows, Размер: 1024 точек
На самом деле здесь должны появиться 3 колонки, но только 2 отображаются. От 1038px видны 3 столбца.

Я не понимаю, что я делаю неправильно .. Любая помощь?

сайт: http://www.len-lenlikes.com/#go_posts

masonry_responsive_css:

#site-content { 
    max-width: 82em; 
    margin-top: 2.2%; 
    min-height: 700px; 
} 

#list { 
    width: 100%; 
    margin-left: 0; 
    overflow: hidden; 
    margin-bottom: -1.875em; 
} 


.item { 
    width: 100%; 
    margin-bottom: 2.2%; 
    float: left; 
} 

.item img { 
    padding-left: 2%; 
    padding-right: 2%; 
    width: 100%; 
    height: auto; 
} 

@media (min-width: 47em) { 
    #site-content { 
    margin: 1.1% auto; 
    } 
} 

@media (min-width: 64em) { 
    #site-content { 
    background-color: red; 
    } 
} 
@media (min-width: 90em) { 
    #site-content { 
    margin-top: 4.4%; 
    } 
} 
@media (min-width: 100em) { 
    #site-content { 
    max-width: 114em; 
    margin-top: 2.8%; 
    } 
} 

@media (min-width: 47em) { 
    .item { 
    width: 50%; 
    margin-top: 0.6%; 
    } 
} 
@media (min-width: 64em) { 
    .item { 
    width: 33.2%; 
    margin-top: -1%; 
    } 
} 
@media (min-width: 100em) { 
    .item { 
    width: 25%; 
    } 
} 

@media (min-width: 47em) { 
    .item img { 
    padding-left: 9px; 
    padding-right: 9px; 
    } 
} 

masonry_responsive_js:

// update columnWidth on window resize 
var columns = 1, 
    setColumns = function() { 
     if (jQuery(window).width() < 767) { 
      columns = 1 
     } else if (jQuery(window).width() < 1023) { 
      columns = 2 
     } else if (jQuery(window).width() < 1760) { 
      columns = 3 
     } else { 
      columns = 4 
     } 
    } 

    setColumns(); 
     jQuery(window).resize(setColumns); 


//container for the posts (images) 
var $container = jQuery('#list'); 


//Detect when images have been loaded. 
$container.imagesLoaded(function() { 
    //Initialize Masonry 
    $container.masonry({ 
      isAnimated: true, 
      animationOptions: { 
       duration: 500, 
       easing: 'linear', 
       queue: false 
      }, 

      //Animating with CSS Transitions 
      isAnimated: !Modernizr.csstransitions, 
      itemSelector: '.item', 
      resizable: false, // disable normal resizing 
      columnWidth: function (containerWidth) { 
       return containerWidth/columns; 
      } 
     }); 
}); 

$container.infinitescroll({ 
      navSelector: '#nav-posts', // selector for the paged navigation 
      nextSelector: '#nav-posts .prev a', // selector for the NEXT link (to page 2) 
      itemSelector: '.item',  // selector for all items you'll retrieve 
      loading: { 
       msgText: 'Loading...', 
       finishedMsg: 'No more pages to load.', 
       img: '' 
     } 
    }, 

    // trigger Masonry as a callback 
    function (newElements) { 
     // hide new items while they are loading 
     var $newElems = jQuery(newElements).css({ opacity: 0 }); 
     // ensure that images load before adding to masonry layout 
     $newElems.imagesLoaded(function() { 
      // show elems now they're ready 
      $newElems.animate({ opacity: 1 }); 
      $container.masonry('appended', $newElems, true); 
     }); 
    } 

Answer 1

Это не выглядит как 'masonry_responsive_js' входит в стоимость номера на веб-сайте вы ссылка.

Но я заметил, что правила, установленные в файле main.js веб-сайта немного отличается от сценария, наклеенной на ваш комментарий выше ...

 if (jQuery(window).width() < 767) { 
      columns = 1 
     } else if (jQuery(window).width() < 1008) { 
      columns = 2 
     } else if (jQuery(window).width() < 1600) { 
      columns = 3 
     } else { 
      columns = 4 
     } 

Обратите внимание, что это проверка на «1600», а не «1760 ». И '1008' вместо '1023'.