Bootstrapで画像を3列表示してスクロール読み取りをしたい

Question

前提・実現したいこと

Rails 5でkaminariとJava ScriptのInfinite Scrollを使用して画像の一覧を無限スクロールで取得する実装を行っています。
スクロールを行い画像を取得して表示したときに、初期表示した画像とずれて表示されてしまいます。
画像の表示については、初期表示が3×3の9枚表示でスクロールで読み込んだ画像は、縦3列で表示しています。

発生している問題・エラーメッセージ

viewのスクロールイメージ

下図のように、スクロールで読み込んだ画像の横幅サイズが小さくなり、レイアウトが崩れる
(赤枠で囲っている箇所がスクロールにより読み込んだ画像で、囲っていない画像は画面を開いた時点で初期表示されているものです)

スクロール読み込み前のhtml

スクロール読み込み後のhtml

該当のソースコード

# users/show.haml

%center
  %h1
    MyDrinkBox
= @user.name
= @user.email
#infinite-scroll
  = render 'micropost'

# users/_micropost.haml

.container
  .row.row-eq-height
    - if @user.microposts.any?
      - @microposts.each do |m|
        - if m.picture.present?
          .thumbnail.post-image.drink-image.col-md-4
            = image_tag m.picture.url
            = m.content
            %br
            投稿日：
            = m.created_at
      .page-load-status
        .infinite-scroll-request
          = paginate @microposts

# drink_boxes.coffee

$(document).on 'turbolinks:load', ->
  $('#infinite-scroll').infiniteScroll
    path: 'nav.pagination a[rel=next]'
    append: '.post-image'
    history: false
    prefill: true
    status: '.page-load-status'
    loading:
      msgText: 'loading...'
      finishedMsg: '終わり'

この事象について

rowクラス内部で無限スクロールでの画像表示のリクエストを行っているのですが、取得した画像一覧がrowクラスの親タグのcontainerと同じ位置で表示されているため、レイアウトが若干崩れているのだと思っています。

足りない情報や説明不足などありましたら、恐縮ですがご指摘ください。

補足情報（FW/ツールのバージョンなど）

• Ruby：2.5.1
• Ruby on Rails：5.2.3
• bootstrap-sass：3.4.1
• infinite-scroll：3.0.6

Answer 1

スクロール読み込み後のhtmlで生成されている、

<div class="thumbanil ....col-md-4"></div>

は#infinite-scrollの直下、つまり<div id="infinite-scroll"></div>の直下に入っています。

今回の問題を解決するためには、
以下のDomの中にスクロール読み込み後に生成されるDomを入れてあげるとうまくいくかもです。

<div class="row row-eq-height">
  ...
</div>