Question

我有一个脚本切换div的可见性，div内部是加载了砌体插件的内容。我遇到的问题是砌体div（因此两个包装div）在加载砌体内容时不会在高度上扩展 - 它将砌体项目拼凑在一起。

这是我的代码：

<html>
    <head>
        <title>view?</title>
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
        <script type='text/javascript' src="http://masonry.desandro.com/jquery.masonry.min.js"></script>

        <style type="text/css">
            #step_wrapper{
                width:960px;
                margin:0px auto;
                /*float:left;*/
            }
            .step_num{
                float:left;
                width:50px;
                background-color:#0099ff;
            }
            .step{
                float:left;
                width:910px;
                background-color:#ff0000;
                padding-bottom:20px;
                margin-bottom:20px;
            }
            .step h2{
                padding:0px;
                margin:0px;
            }
            .media{
                background-color:#59A20E;
                width:100%;
                text-align:center;
                cursor:hand;
                float:left;
            }
            #content-step-1{

            }
            .content{
                float:left;
                min-width:785px;
                margin-left:40px;
                background-color:#0066ff;
                padding-left:15px;
                display:none;
            }
            .item {
              width: 165px;
              float: left;
              padding:5px;
              background-color:#FF0;
              margin-top:10px;
            }
        </style>
        <script>
        $(function(){
            <!-- masonry plugin -->
            var $container = $('#content-step-1');
            $container.imagesLoaded(function(){
              $container.masonry({
                itemSelector : '.item',
                columnWidth : 165
              });
            });
            $($container).masonry({
                // options
                itemSelector : '.item',
                columnWidth : 165,
                gutterWidth : 35
            });
            <!-- masonry plugin -->

            <!-- needs to be auto generated -->
            $("#step-1").click(function () {
                $("#content-step-1").toggle("fast");
            });
            <!-- needs to be auto generated -->
        });
        </script>
    </head>
    <body>
        <div id="step_wrapper">
            <div class="step_num">1)</div>
            <div class="step">
                <h2>STEP ONE SON</h2>
                <p>Description here bro</p>
                <div id="step-1" class="media">expand</div>
                <div id="content-step-1" class="content">
                    <div class="item">asjdlajskdla</div>
                    <div class="item"><img src="http://farm5.static.flickr.com/4153/5013039741_d860fb640b.jpg" width='165' /></div>
                    <div class="item">baksdkjasdasdsdadasdasda</div> 
                    <div class="item">asjdlajskdla</div>
                    <div class="item">baksdkjjsdksd</div> 
                    <div class="item">baksdkjasdasdsdadasdasda</div> 
                    <div class="item">asjdlajskdla</div>
                    <div class="item">baksdkjjsdksd</div> 
                </div>
            </div>

        </div>
    </body>
</html>

任何帮助将不胜感激，谢谢！

Answer 1

我前几天遇到过smiler问题。你需要做什么，当你点击打开隐藏的div而不是reload砌体视图。通过使用以下。

$("#step-1").click(function () {
     $("#content-step-1").toggle("fast");
     $container.masonry('reload');
});

隐藏div的高度不随着砌体内容而扩展

1 个答案: