响应式3列布局在无限滚动后全部搞砸了

Question

我有一个响应式固定三列固定宽度列布局，可变高度取决于div内容长度。 div总是很好地堆叠在3列中。现在我使用大约6-7个其他页面的div进行无限滚动，并且它可以工作。然而，我的布局突然变得混乱，突然显示9列。我不明白为什么。

HTML主页：

    <div id="loader"></div>
    <div class="container">
        <div class="row">
            <h1>Articles base</h1>
        </div>

        <div class="row" id="scroll-container">
            <div class="content">
                <div class="col-md-4">
                    <div class="well">
                        <a class="thumbnail" href="#"><img alt=
                        "Generic placeholder thumbnail" src="images/d.jpg">

                        <h3>Article title</h3>

                        <p>la la la la</p></a>

                        <h4>Author and publish date</h4>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="well">
                        <a class="thumbnail" href="#"><img alt=
                        "Generic placeholder thumbnail" src="images/d.jpg">

                        <h3>Article title</h3>

                        <p>la la la la la</p></a>

                        <h4>Author and publish date</h4>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="well">
                        <a class="thumbnail" href="#"><img alt=
                        "Generic placeholder thumbnail" src="images/d.jpg">

                        <h3>Article title</h3>

                        <p>la la la la la</p></a>

                        <h4>Author and publish date</h4>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="well">
                        <a class="thumbnail" href="#"><img alt=
                        "Generic placeholder thumbnail" src="images/k.jpg">

                        <h3>Article title</h3>

                        <p>la la la la la</p></a>

                        <h4>Author and publish date</h4>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="well">
                        <a class="thumbnail" href="#"><img alt=
                        "Generic placeholder thumbnail" src="images/l.jpg">

                        <h3>Article title</h3>

                        <p>la la la</p></a>

                        <h4>Author and publish date</h4>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="well">
                        <a class="thumbnail" href="#"><img alt=
                        "Generic placeholder thumbnail" src="images/d.jpg">

                        <h3>Article title</h3>

                        <p>la la la la la</p></a>

                        <h4>Author and publish date</h4>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="well">
                        <a class="thumbnail" href="#"><img alt=
                        "Generic placeholder thumbnail" src="images/d.jpg">

                        <h3>Article title</h3>

                        <p>la la la</p></a>

                        <h4>Author and publish date</h4>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="well">
                        <a class="thumbnail" href="#"><img alt=
                        "Generic placeholder thumbnail" src="images/i.jpg">

                        <h3>Article title</h3>

                        <p>la la la</p></a>

                        <h4>Author and publish date</h4>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="well">
                        <a class="thumbnail" href="#"><img alt=
                        "Generic placeholder thumbnail" src="images/d.jpg">

                        <h3>Article title</h3>

                        <p>la la la la</p></a>

                        <h4>Author and publish date</h4>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="well">
                        <a class="thumbnail" href="#"><img alt=
                        "Generic placeholder thumbnail" src="images/a.jpg">

                        <h3>Article title</h3>

                        <p>la la la</p></a>

                        <h4>Author and publish date</h4>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="well">
                        <a class="thumbnail" href="#"><img alt=
                        "Generic placeholder thumbnail" src="images/z.jpg">

                        <h3>Article title</h3>

                        <p>la la la</p></a>

                        <h4>Author and publish date</h4>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="well">
                        <a class="thumbnail" href="#"><img alt=
                        "Generic placeholder thumbnail" src="images/d.jpg">

                        <h3>Article title</h3>

                        <p>la la la!</p></a>

                        <h4>Author and publish date</h4>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- These are all the links that can be loaded. -->

    <div id="pages">
        <a href="index.html"></a> <a href="index2.html"></a> <a href=
        "index3.html"></a> <a href="index4.html"></a>
    </div>
</body>
</html>

第2页和第3,4,5页等HTML：

    <div class="row" id="scroll-container">
        <div id="content">
            <div class="col-md-4">
                <div class="well">
                    <a class="thumbnail" href="#"><img alt=
                    "Generic placeholder thumbnail" src="images/e.jpg">

                    <h3>Article title</h3>

                    <p>kiii kiii</p></a>

                    <h4>Author and publish date</h4>
                </div>
            </div>

            <div class="col-md-4">
                <div class="well">
                    <a class="thumbnail" href="#"><img alt=
                    "Generic placeholder thumbnail" src="images/k.jpg">

                    <h3>Article title</h3>

                    <p>la la la la</p></a>

                    <h4>Author and publish date</h4>
                </div>
            </div>

            <div class="col-md-4">
                <div class="well">
                    <a class="thumbnail" href="#"><img alt=
                    "Generic placeholder thumbnail" src="images/m.jpg">

                    <h3>Article title</h3>

                    <p>la la la la</p></a>

                    <h4>Author and publish date</h4>
                </div>
            </div>

            <div class="col-md-4">
                <div class="well">
                    <a class="thumbnail" href="#"><img alt=
                    "Generic placeholder thumbnail" src="images/k.jpg">

                    <h3>Article title</h3>

                    <p>kiii kiii</p></a>

                    <h4>Author and publish date</h4>
                </div>
            </div>

            <div class="col-md-4">
                <div class="well">
                    <a class="thumbnail" href="#"><img alt=
                    "Generic placeholder thumbnail" src="images/l.jpg">

                    <h3>Article title</h3>

                    <p>la la la la!!!</p></a>

                    <h4>Author and publish date</h4>
                </div>
            </div>

            <div class="col-md-4">
                <div class="well">
                    <a class="thumbnail" href="#"><img alt=
                    "Generic placeholder thumbnail" src="images/d.jpg">

                    <h3>Article title</h3>

                    <p>co co co co co co co co co</p></a>

                    <h4>Author and publish date</h4>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS：

*, *:before, *:after {box-sizing:  border-box !important;}


.row {
 -moz-column-width: 25em;
 -webkit-column-width: 25em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 

}

.row >.col-md-4 {
 display: inline-block;
 padding:  .33rem;
 width:  100%; 
 float:none;
}

JQUERY：

    jQuery(document).ready(function() {
    //location.href = 'index.html#start';
    var pages = new Array(); 
    var current = 0; 
    var loaded = new Array(); 

    $('#pages a').each(function(index) {
        pages[index] = $(this).attr('href');
        loaded[$(this).attr('href')] = 0; 
    });

    $(window).scroll(function(e){
        if($(window).scrollTop() + $(window).height() >= $(document).height() - 300) {
            console.log("bottom of the page reached!");
            loaded[pages[current+1]] = loaded[pages[current+1]] + 1; 

            if(loaded[pages[current+1]] <= 1)
                loadMoreContent(current+1);
        }
    });

    function loadMoreContent(position) {
        if(position < pages.length) {
            $('#loader').fadeIn('slow', function() {
                $.get(pages[position], function(data) {
                    $('#loader').fadeOut('slow', function() {
                        $('#scroll-container').append(data).fadeIn(999);
                        current=position;
                    });
                });
            });
        }
    }
});