响应式网页设计中的同位素布局混乱

Question

我在http://www.gablabelle.com 的响应式网页设计中使用同位素，并且布局在页面加载时很好，但在调整窗口大小时会变得混乱。查看我的脚本文件后，我不知道出了什么问题。

奇怪的是布局在某个时候就位。

请观看此视频：http://www.visualise.ca/files/videos/isotope02.mov

还在http://jsfiddle.net/CNb7r/添加了一个示例

我尝试了两种不同的 jQuery 脚本

第一）

    var $container = $("#stream");
    var $window = $(window);
    $container.imagesLoaded( function(){
        $container.isotope({
            animationEngine: "best-available",
            itemSelector : "article.post",
            masonry: {
            columnWidth: 300,
            gutterWidth: 30
            },
            onLayout: function(){
                forceLoad();
                setTimeout(function(){
                    html_height = $container.height();
                    $("#sidebar").height(html_height - 30);
                }, 500);
            }    
        });
    });
    $window.smartresize(function(){
        var windowSize = $window.width();
        var masonryOpts;
        // update sizing options 
        if (windowSize > 1199) {
            masonryOpts = {
                columnWidth: 300,
                gutterWidth: 30
            };
        } else if (windowSize < 1200 && windowSize > 979) {
            masonryOpts = {
                columnWidth: 240,
                gutterWidth: 20
            };
        } else if (windowSize < 768) {
            masonryOpts = {
                columnWidth: windowSize / 2,
                gutterWidth: 1
            };
        } else {
            masonryOpts = {
                columnWidth: 186,
                gutterWidth: 20
            };
        }
        $container.isotope({
            masonry: masonryOpts
        }).isotope('reLayout');
    }).smartresize();

和第二个）

$(window).smartresize(function(){       
        var $windowSize = $(window).width();
        if ($windowSize > 1199) {
            $container.imagesLoaded( function(){
                $container.isotope({
                    animationEngine: "best-available",
                    itemSelector : "article.post",
                    masonry: {
                        columnWidth: 300,
                        gutterWidth: 30
                    },
                    onLayout: function(){
                        setTimeout(function(){
                            html_height = $container.height();
                            $("#sidebar").height(html_height - 30);
                        }, 500);
                    }       
                });
            });
        } else if ($windowSize < 1200 && $windowSize > 979) {
            $container.imagesLoaded( function(){
                $container.isotope({
                    animationEngine: "best-available",
                    itemSelector : "article.post",
                    masonry: {
                        columnWidth: 240,
                        gutterWidth: 20
                    },
                    onLayout: function(){
                        setTimeout(function(){
                            html_height = $container.height();
                            $("#sidebar").height(html_height - 20);
                        }, 500);
                    }       
                });
            });
        } else if ($windowSize < 768) {
            $container.imagesLoaded( function(){
                $container.isotope({
                    animationEngine: "best-available",
                    itemSelector : "article.post",
                    resizable: false,
                    masonry: {
                        columnWidth: $windowSize / 2,
                        gutterWidth: 1
                    },
                    onLayout: function(){
                        setTimeout(function(){
                            html_height = $container.height();
                            $("#sidebar").height(html_height - 30);
                        }, 500);
                    }   
                });
            });
        } else {
            $container.imagesLoaded( function(){
                $container.isotope({
                    animationEngine: "best-available",
                    itemSelector : "article.post",
                    masonry: {
                        columnWidth: 186,
                        gutterWidth: 20
                    },
                    onLayout: function(){
                        setTimeout(function(){
                            html_height = $container.height();
                            $("#sidebar").height(html_height - 20);
                        }, 500);
                    }   
                });
            });
        };  
    }).smartresize();

如果您禁用 Javascript，您会看到响应式 CSS 是正确的（不会显示缩略图，只会显示占位符）。

任何帮助将不胜感激。谢谢。

Answer 1

解决办法在这里：https://github.com/desandro/isotope/issues/271#issuecomment-8887060