Javascript 隐藏div的高度不为'；t随砌体含量而膨胀_Javascript_Jquery_Jquery Masonry

Javascript 隐藏div的高度不为'；t随砌体含量而膨胀

javascript jquery

Javascript 隐藏div的高度不为'；t随砌体含量而膨胀,javascript,jquery,jquery-masonry,Javascript,Jquery,Jquery Masonry,我有一个切换div可见性的脚本，在div的内部是用插件加载的内容。我遇到的问题是，当加载砌体内容时，砌体div（以及作为结果的两个包装div）不会在高度上扩展-它将砌体项目挤压在一起这是我的密码： <html> <head> <title>view?</title> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/

我有一个切换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>


看法
#步进包装器{
宽度：960px；
保证金：0px自动；
/*浮动：左*/
}
.step_num{
浮动：左；
宽度：50px；
背景色：#0099ff；
}
.步骤{
浮动：左；
宽度：910px；
背景色：#ff0000；
垫底：20px；
边缘底部：20px；
}
.步骤h2{
填充：0px；
边际：0px；
}
.媒体{
背景色：#59A20E；
宽度：100%；
文本对齐：居中；
光标：手；
浮动：左；
}
#第1步内容{
}
.内容{
浮动：左；
最小宽度：785px；
左边距：40px；
背景色：#0066ff；
左侧填充：15px；
显示：无；
}
.项目{
宽度：165px；
浮动：左；
填充物：5px；
背景色：#FF0；
边缘顶部：10px；
}
$（函数（）{
var$container=$（“#content-step-1”）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.item”，
列宽：165
});
});
$（$容器）({
//选择权
itemSelector:“.item”，
列宽：165，
排水沟宽度：35
});
$（“#步骤1”）。单击（函数（）{
$（“#content-step-1”）。切换（“快速”）；
});
});
1)
继子
描述在这里，兄弟
扩大
asjdlajskdla
Baksdkjasdasda
asjdlajskdla
baksdkjjsdksd
Baksdkjasdasda
asjdlajskdla
baksdkjjsdksd

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

几天前，我遇到了一个微笑的问题。当您单击打开隐藏的div时，您需要在此处执行的操作是重新加载视图。通过使用下面的

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