jQuery Masonry и медиа-запросы - перезагрузите кладку

Question

У меня есть сайт, созданный с помощью медиазапросов для размещения макетов разного размера.У меня есть кладка, организующая кучу поплавков в натуральную величину, нет проблем.на подвижных шинах все поплавки срываются и просто укладываются друг на друга.поэтому мне нужно перезапускать кирпичную кладку только тогда, когда сайт изменяет размер макета планшета, когда 768px <= width <= 1000px.</p>

<script type="text/javascript">
//<![CDATA[

    $(document).ready(function($){

        $('ul.xoxo').masonry({ singleMode: true, itemSelector: '.widgetcontainer'  });

        //If the User resizes the window, adjust the #container height
        $(window).bind("resize", resizeWindow);
        function resizeWindow( e ) {
            var newWindowWidth = $(window).width();

            if(newWindowWidth<1008){
                $('ul.xoxo').masonry();
            } else {
                $('ul.xoxo').masonry();
            }
        }

    });

/* ]]> */
</script>

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

Answer 1

Вы можете использовать опцию Masonary isResizable для этих случаев.

  $container.masonry({
    itemSelector: '.box',
    isResizable: true
  });

Answer 2

лучшее решение для того, что я пытался сделать, называется Isotope, которое лучше работает при изменении размера

http://isotope.metafizzy.co/