Jquery插件masonry使用问题

masonry只是一个插件，你可以仔细看看官方给的demo，如果还是解决不了，你可以把你的代码整理一下贴出来，否则想帮你也说不清楚。

我用masonry做瀑布流的时候，按照官网的例子没有遇到任何问题，这个只是一个jquery插件，你说的infinitescroll ，我在这里
http://www.cnblogs.com/irelands/archive/2012/04/16/2451262.html
也看到有人在用，证明还是你的代码有问题

贴上代码：
a.aspx<head runat="server">
    <script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.masonry.js" type="text/javascript"></script>
    <style type="text/css">
        #con{margin:auto;width:1000px;}
    .item { width:250px;margin:5px;float: left; background:#ffc;}
    </style>
    <script type="text/javascript">
        $(function(){
            $('#con').imagesLoaded(function() {
                $('#con').masonry({
                    itemSelector: ".item", //子类元素选择器
                    columnWidth:260 ,//一列的宽度，包括边距 220+10+10
                    gutterWidth:5,//列的间隙
                    isAnimated:true,
                    isFitWidth:false//自适应宽度
                });
            });
        });        function getitem() {
            var n=$("#append").attr("num");
            $.get("/home/b/"+n,function(data){
            var $boxes = $(data);
            $('#con').append($boxes).masonry('reload');
            $("#append").attr("num",parseInt(n)+1);
            });

        }
    </script>
</head>
<body>
    <div>
    <div id="con">
    <% for (int i=1;i<=10;i++)
   { %>
   <div class="item"><img src="/Images/<%= i %>.jpg" width="250"></div>
   <%} %>
    </div>
    <input id="append" type="button" value="获取" onclick="getitem();" num="0"/>
    </div>
</body>
被调用的b.aspx代码：<% for (int i=1;i<=10;i++)
   { %>
   <div class="item"><img src="/Images/<%= i %>.jpg" width="250"/></div>
   <%} %>

在chrome浏览器中第一次获取数据填充时会乱做一团，第二次及以后没有问题，但是第一次加载过来的数据依然乱着。。

masonry版本： jQuery Masonry v2.1.03

我告诉你吧楼主，chrome会乱是应为chrome太快了，你ie可能看不出来，你这个布局，最重要的一点是图片没有加载成功的时候，img是没有高度的，这个时候去布局当然乱作一团
解决方法有两种：1：$(img).load用这个保证所有的img都加载完了再去调用布局控件，不过这个略坑爹，图片加载慢就搞笑了。
2：服务器动态的返回img图片的高度，这个是现在大家常用的，你可以去一下实现瀑布流的网站去看一下返回的json，都是包含图片高度的。

我告诉你吧楼主，chrome会乱是应为chrome太快了，你ie可能看不出来，你这个布局，最重要的一点是图片没有加载成功的时候，img是没有高度的，这个时候去布局当然乱作一团
解决方法有两种：1：$(img).load用这个保证所有的img都加载完了再去调用布局控件，不过这个略坑爹，图片加载慢就搞笑了。
2：服务器动态的返回img图片的高度，这个是现在大家常用的，你可以去一下实现瀑布流的网站去看一下返回的json，都是包含图片高度的。多谢指点。方案2 有点难实现，因为我不是单纯加载图片的不太容易返回图片的高度。这会网上又研究了一下，已经解决chrome下的这个问题解决方案如下：$('#con').append($boxes).masonry("appended", $boxes, true);
                $('#con').imagesLoaded(function () {
                    $('#con').masonry();
                });

将点击获取的代码改成这个就行了，原因也知晓了，确实是chrome 有些“快”没拿到图片高度就把框架加载过来了。。

其实多多少少是你的布局设计有问题，即便没有图片高度，
你DIV布局合理的话，至少布局是不是乱的。顶多是没有加载的图片高度没有出来。
它不应该影响到DIV的布局，img只是内部的一个元素而已。方案：设置img的最小高度，控制在一个合理的值。
方案： img外用div包裹定位布局，不要让img的宽高影响到你的布局。
方案：试着在img下的div 加一个<div style="clear:both"></div>

还要询问点事：masonry 怎么控制列数啊？我容器div的宽度是1050px；每一列155px ；columnWidth：155
gutterWidth：0为啥才3列？

columnWidth: 155, //一列的宽度
                gutterWidth: 0, //列的间隙
                isAnimated: true,
                isFitWidth: true, //自适应宽度
                isResizableL:true

我了个去，解决了 gutterWidth 不能设置成0 设置成10 就OK了

图片设置最小高度也可以解决那个问题，但是我在IE8上测试，发现每次图片加载都是排成一列，并不是瀑布流，按一下F12就变成瀑布流了，一刷新又不是了，这是什么情况？

调试易

Jquery插件masonry使用问题

解决方案 »