Jquery 无限滚动后，响应性强的3列布局都变得一团糟

我有一个响应固定的三列固定宽度列布局，高度随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>

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;
                    });
                });
            });
        }
    }
});

---

我解决了columns的问题，它始终返回到3列。然而，当向下或向上滚动刷新时，div之间的填充现在不知何故被弄乱了。在最新的Firefox中，div略微重叠，在最新的Chrome中，div在两侧都被切断，但填充物得到了尊重。我无法解释或纠正它。你能创建一个像JSFIDLE或codepen这样的游乐场版本吗。这里的代码太多了。

*, *: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(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;
                    });
                });
            });
        }
    }
});