jQuery Masonry 插件和动态样式表

Question

我的页面布局需要根据浏览器大小从 3 列布局减少到 2 列布局。我还使用jQuery masonry plugin 来保持页面上的容器网格排列得很好。这一切都适用于窗口调整大小。

我遇到的问题是，如果我以小于 1100 像素的尺寸加载页面，它会使用 jQuery 正确调用“col2.css”样式表，但砌体插件认为它仍然是 3 列布局，直到您手动调整大小浏览器，因此网格仍处于 col3 宽度并超出容器的大小。

我猜我需要在 jQuery 选择样式表后以某种方式调用 masonry 函数，但我不知道该怎么做。

我有这个想法

<link href="<?=base_url()?>inc/css/col3.css" id="size-stylesheet" rel="stylesheet" type="text/css"  />

和下面的javascript

    $(document).ready(function() {

        function adjustStyle(width) {
            width = parseInt(width);
            if (width < 1100) {
                $("#size-stylesheet").attr("href", "inc/css/col2.css");
            } else {
                $("#size-stylesheet").attr("href", "inc/css/col3.css"); 
            }
        }

        $(function() {
            adjustStyle($(this).width());
            $(window).resize(function() {
                adjustStyle($(this).width());
            });
        });

        //masonry       
        $(function(){
          $('#masonry').masonry({
            itemSelector : '.project',
            columnWidth : 365,
            isAnimated: true
          });
        });

    });

任何帮助将不胜感激！

Answer 1

首先，根据描述。我认为您最好寻求响应式设计方法，这是一篇好文章：http://www.alistapart.com/articles/responsive-web-design/。这可以解决您的问题，无需手动切换 Css。

其次，一个可能的问题是，在加载 col3.css 时，在切换到 col2.css 之前应用了砌体。因此，您必须尽早加载 col2.css，这可以通过将相关代码移出 document.ready 函数来完成。

function adjustStyle(width) {
        width = parseInt(width);
        if (width < 1100) {
            $("#size-stylesheet").attr("href", "inc/css/col2.css");
        } else {
            $("#size-stylesheet").attr("href", "inc/css/col3.css"); 
        }
    }
//this runs when the page starts
$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});
//this runs when DOM is ready
$(document).ready(function() {
    //masonry       
      $('#masonry').masonry({
        itemSelector : '.project',
        columnWidth : 365,
        isAnimated: true
      });
});

第三，如果这不能解决问题，您可以随时重新加载砌体以重新排列元素：

$('#masonry').masonry('reload');