瀑布流控件（jquery masonry）使用的一些有关问题：清空容器里的内容 追加新内容出现空白区域

瀑布流控件（jquery masonry）使用的一些问题：清空容器里的内容 追加新内容出现空白区域
不知道大家对瀑布流控件（jquery masonry）是否熟悉

我的问题：

页面加载 异步从数据库取30条数据，用json格式抛到前台，前台解析好后，遍历输出，效果如图1，一切正常，如果再取数据append到后面也没问题。问题是清空页面所有内容，重新追加到页面上就有问题了，留出很大区域空白，并且每次点击会越来越高  如图2所示
（chrome，ie里正常，ff，sogou等浏览器都有如图所示问题）






首次加载代码：

            $(function () {
            //首次加载：
            $.ajax({
                url: "getJson.ashx",
                type: "post",
                data: { hideIndex: 1, dsid: 0 },
                dataType: 'json',
                success: function (data) {
                    $.each(data, function (i, data) {
                        var $boxes = $('<div class="box cell"><div class="t"><div class="img"><strong class="jia">' + '&yen; ' + data["spPrice"] + '</strong><a href="' + data["spUrl"] + '" target="_blank"><img src="' + data["spImage"] + '"/></a><a href="" class="ilike">赞</a></div><div class="zan"><strong>' + data["Splook"] + '</strong><span class="notify">赞+1</span><input type="hidden" id="productIdHidden" value= "' + data["spid"] + '" /><span>来自：<b>' + data["dsName"] + '</b></span></div></div><div class="b"><a href="' + data["spUrl"] + '" target="_blank">' + data["spName"] + '</a></div></div>');
                        $("#container").append($boxes).masonry('appended', $boxes, true);

                    })

                    var $img = $('#container img');
                    $img.load(function () {
                        $('#container').masonry();
                    });
                }
            });
        })

按钮点击代码：

            $(function () { 
 
            //点击刷新
            $("#btn").click(function () {
                $("#container").empty();   //清空container
                $.ajax({
                    url: "getJson.ashx",
                    type: "post",
                    data: { hideIndex: 1, dsid: 0 },
                    dataType: 'json',
                    success: function (data) {
                        $.each(data, function (i, data) {
                            var $boxes = $('<div class="box cell"><div class="t"><div class="img"><strong class="jia">' + '&yen; ' + data["spPrice"] + '</strong><a href="' + data["spUrl"] + '" target="_blank"><img src="' + data["spImage"] + '"/></a><a href="" class="ilike">赞</a></div><div class="zan"><strong>' + data["Splook"] + '</strong><span class="notify">赞+1</span><input type="hidden" id="productIdHidden" value= "' + data["spid"] + '" /><span>来自：<b>' + data["dsName"] + '</b></span></div></div><div class="b"><a href="' + data["spUrl"] + '" target="_blank">' + data["spName"] + '</a></div></div>');
                            $("#container").append($boxes).masonry('appended', $boxes, true);

                        })

                        var $img = $('#container img');
                        $img.load(function () {
                            $('#container').masonry();
                        });
                    }
                });
            }); 
 
        })

如果没使用过此控件 有做其他瀑布流效果的也可以提供下建议，会适当射分，谢谢。




[解决办法]
没搞过 。去查了一下 。 

http://masonry.desandro.com/demos/adding-items.html
[解决办法]
帮你顶一下


[解决办法]

引用:

没搞过 。去查了一下 。 

http://masonry.desandro.com/demos/adding-items.html

这个我看过，跟我的需求还差一点，连接的这个是追加，我的追加也没问题，就是清空再追加新内容进去在部分浏览器里会有空白（图2）
[解决办法]

引用:

引用:没搞过 。去查了一下 。 

http://masonry.desandro.com/demos/adding-items.html这个我看过，跟我的需求还差一点，连接的这个是追加，我的追加也没问题，就是清空再追加新内容进去在部分浏览器里会有空白（图2）

部分浏览器  其他浏览器 没有出现这个问题吗  是的话浏览器兼容问题
[解决办法]

引用:

引用:引用:没搞过 。去查了一下 。 

http://masonry.desandro.com/demos/adding-items.html这个我看过，跟我的需求还差一点，连接的这个是追加，我的追加也没问题，就是清空再追加新内容进去在部分浏览器里会有空白（图2）
部分浏览器  其他浏览器 ……

ie chrome都ok
360 猎豹 sogou等都有空白区域

话说浏览器兼容的问题 该从什么方面入手解决？
[解决办法]
搞定了 每次清空后调用reload才搞定的：
$('#container').masonry('reload');

这次的教训：用插件还是要多看官方api，要不会被搞死

查看更多 下一篇