Height of hidden div doesn't expand with Masonry content

问题

I have a script that toggles the visibility of a div, inside of the div is content loaded with the masonry plugin. The issue I'm having is that the masonry div (and as a result the two wrapper divs) doesn't expand in height as the masonry content is loaded - it squishes the masonry items together.

here's my code:

<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>

any help would be greatly appreciated, thank you!

回答1:

I had faced smiler problem few day ago. what you need to do here, when you click to open hidden div than you have to reload masonry view. By using below.

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

来源：https://stackoverflow.com/questions/14942897/height-of-hidden-div-doesnt-expand-with-masonry-content

标签

javascript

jquery

jquery-masonry