Question

我正在尝试使用AngularJS / Angular-Isotope创建一个完全响应的Isotope版本。我创建了一个非AngularJS版本，利用这个jQuery（在Stackoverflow和其他源上找到）来使列和项响应：

$(window).load(function() {
   var $container = $('#one-column'),
   margin = 10,
   colWidth = function () {
    var w = $container.width(), 
            columnNum = 1,
            columnWidth = 0;
        if (w > 1200) {
            columnNum  = 5;
        } else if (w > 1024) {
            columnNum  = 4;
        } else if (w > 768) {
            columnNum  = 3;
        } else if (w > 480) {
            columnNum  = 2;
        }
    columnWidth = Math.floor(w/columnNum);
    var $item = $('.story'),
            width = columnWidth-10
            $item.css({ width: width });
        var $featured = $('.featured'),         
            dblwidth = columnWidth*2-10
            if (w > 480) {
                $featured.css({
                    width: dblwidth
                });
            } else {
                $featured.css({
                    width: width
                });
            }
    return columnWidth;
   };
   $(window).on('throttledresize', isotope);
});

将Angular引入此jQuery版本会导致砌体布局偶尔加载或不加载 - 没有错误，因此我使用ManKindSoftware's Angular Isotope加载项目然后相应地进行过滤 - 每次都会加载。但是，在初始加载时，项目都是固定高度，列是自适应的而不是响应。我似乎无法弄清楚如何根据调整大小灵活地更改列宽并使列和同位素项响应。

有没有人有这方面的经验？

如何让Angular Isotope完全响应？

0 个答案: