Question

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

我遇到的问题是，如果我以小于1100px的大小加载页面，它使用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');

jQuery Masonry插件和动态样式表

1 个答案: