javascript - 通过 PHP 和 jQuery 注入 HTML 出错了

Question

我是初学者，我试图从成功的数据库中动态加载内容。然后我的下一个目标是使用 javascript 实现无限滚动，但我认为 HTML 代码被注入到错误的地方或其他地方，因为当我使用data-columns并尝试通过滚动加载更多内容时，样式变得疯狂。如果我把它拿出来，它加载得很好，但我的页面风格到处都是。

屏幕截图应该是什么样子

我在开始时加载 4 个项目，然后在到达底部页面时再加载 4 个项目时的外观

注入数据的 index.php html

<div id="fh5co-main">
    <div class="container">

        <div class="row">

            <div id="fh5co-board" class="results" data-columns>


            </div>
        </div>
    </div>
</div>

在 index.php 中无限加载的 Javascript

<script type="text/javascript">


    var start = 0;
    var limit = 4;
    var reachedMax = false;

    $(window).scroll(function () {
        if($(window).scrollTop() == $(document).height() - $(window).height())
            getData();

    });

    $(document).ready(function () {
        getData();

    });

    function getData() {
        if(reachedMax)
            return;

        $.ajax({
            url: 'load_more.php',
            method: 'POST',
            dataType: 'text',
            data: {
                getData: 1,
                start: start,
                limit: limit
            },
            success: function (response) {
                if (response == "reachedMax")
                    reachedMax = true;
                else {
                    start += limit;
                    $(".results").append(response);


                }

            }
        });

    }



</script>

load_more.php

<?php include_once "includes/functions.php"?>

<?php

if(isset($_POST['getData'])) {

    $start = $_POST['start'];
    $limit = $_POST['limit'];

    $query = "SELECT title, image, text FROM posts LIMIT $start, $limit";
    $result = mysqli_query(DatabaseConnect(), $query);

    if (mysqli_num_rows($result) > 0) {
        $response = "";

        while ($data = mysqli_fetch_array($result)) {

            $response .= '
            <div class="item">
        <div class="animate-box">
            <a href="images/' . $data['image'] . '" class="image-popup fh5co-board-img" title="' . $data['title'] . '"><img src="images/' . $data['image'] . '" alt="image"></a>
        </div>
        <h3>' . $data['title'] . '</h3>
        <div class="fh5co-desc">' . $data['text'] . '</div>
    </div>';
        }

        exit($response);

    } else
        exit('reachedMax');


}

标签： javascriptphpjqueryhtmlcss