jQuery砌体和媒体查询 - 重新加载砌体 [英] jQuery Masonry and media queries - reload masonry

问题描述

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

i have my site designed with media queries to cover different-sized layouts. i have masonry organizing a bunch of floats at the full-size width, no problem. at the mobile widths, all the floats, unfloat and just stack on top of each other. so i only need to re-run masonry when the site resizes to the tablet layout when 768px <= width <= 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>

这对我来说不起作用，但我也不希望它在所有调整大小上运行......就在破发点。

which doesn't work for me yet, but also i don't want it running on all resizes... just at the break points.

推荐答案

我试图做的更好的解决方案叫做Isotope，它在调整大小时效果更好

a better solution for what i was trying to do is called Isotope, which works better on resize

http://isotope.metafizzy.co/

这篇关于jQuery砌体和媒体查询 - 重新加载砌体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！