Question

我的网站设计了媒体查询，以涵盖不同大小的布局。我有砌体在全尺寸宽度组织一堆浮子，没问题。在移动宽度，所有浮动，浮动，只是堆叠在彼此之上。所以当768px＆lt; = width＆lt; = 1000px时，当网站调整到平板电脑布局时，我只需要重新运行砌体。

<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/

jQuery砌体和媒体查询 - 重新加载砌体

2 个答案: