javascript - skel.js はデータベース内のデータから動的に行を作成します

Question

私は skel.js を使用してレスポンシブ Web アプリを構築しています。特に、mysql データベースからのデータを行ごとに 3 つのグループに配置された小さなボックスに表示する必要があります。私が直面している問題は、mysql データベースからのデータをどのように配置して、3 つのレコードごとに 3 つのボックスを持つ行を自動的に作成するかということです。

現在、これを行うためにjQueryを使用しています：

$(window).load(function() {
      var divs = $("div#boxes");
      for(var i = 0; i < divs.length; i+=3) {
      divs.slice(i, i+3).wrapAll("<div class='row'></div>");
  }
});

それでも、この方法では、ページが読み込まれると、すべてのボックスが接着されます。0.5 秒後、ギブまたはテイクして、最終的なレイアウトが意図したとおりに機能します。私はその醜い接着ボックス効果を方程式から取り除きたい.

3 つのグループでレコードを「遅延読み込み」し、「オンザフライ」で html マークアップを作成することを考えましたが、それはパフォーマンスにかなり強い影響を与えます。どう思いますか？

手伝って頂けますか？

PS。各行のマークアップは次のとおりです。

<div class="row">
    <div class="12u">
        <section>
            <div class="4u" id="boxes">
                <section class="box">
                    <!-- mySQL data -->
                </section>
                <section class="box">
                    <!-- mySQL data -->
                </section>
                <section class="box">
                    <!-- mySQL data -->
                </section>
            </div>
        </section>
    </div>
</div>