html визуализируется с помощью php и визуализируется с помощью javascript, имеет другой дизайн

Question

Я включил в свой индекс 4 файла csss. php внутри

     <link rel="stylesheet" href="style/style.css">
    <link rel="stylesheet" href="style/style.index.css">
    <link rel="stylesheet" href="style/media.css">
    <link rel="stylesheet" href="style/media.index.css">

Я знаю, что делать много HTTP-запросов - не лучшая идея, но позже я объединю их, так что это не должно ' нет никаких проблем.

Прямо сейчас я делаю сайт, на котором пользователь может найти самые популярные фильмы и поискать фильмы. Одна из функций - отправить запрос API и показать результат в виде галереи изображений. Вначале я использовал Javascript для получения результата api и его рендеринга.

 class fetchModel {
   constructor(){
      this.isIndex = null;
      this.doesQueryExist = null;
      this.url = window.location.href;
  }
  async sendFetch() {
    const hash = await this.url.split('?')[1];
    if(!hash){
        let fetchResponse = await fetch('http://localhost/movieMovie/popular.php');
        let fetchedJSON = await fetchResponse.json();
        if (window.location.href.endsWith('/')){
            fetchedJSON.length = 6;
            this.doesQueryExist = false;
        }
        return fetchedJSON;
    }else{
        return 0;
    }
}
}
class fetchView {
renderFetch(fetchData) {
    let figure, image, movieDataJSON;
    let divElement = $('<div></div>');
    for (let i = 0; i < fetchData.length; i++) {
        movieDataJSON = JSON.parse(fetchData[i]);
        figure = $('<figure class="col-8 col-sm-4"></figure>');
        image = $('<img alt="' + movieDataJSON.Title + '">');
        image.attr('src', movieDataJSON.Poster);
        figure.append(image);
        if ($(window).width() < 576 && i == 0) {
            figure.addClass('active');
        }
        divElement.append(figure);
        if(window.location.href.endsWith('/')){
            divElement.insertAfter('#MostlyRecommended>div:first-child');
        }else{
            divElement.insertAfter('#Results>div:first-child');
        }
    }
  }
 }
 class fetchController {
constructor(model, view) {
    this.model = model;
    this.view = view;
    this.model.sendFetch().then(data => this.fetchedData(data));
}
fetchedData(data) {
    if(!this.model.doesQueryExist){
        this.view.renderFetch(data);
    }
}
}
const fetchModelObject = new fetchModel();
const fetchViewObject = new fetchView();
const fetchControllerObject = new fetchController(fetchModelObject, fetchViewObject);

, и это отлично работает,

это дизайн, если я использую javascript, хорошо. Но позже я подумал, что вместо php отправки выборки в популярный. php с javascript он может просто включать популярный. php напрямую.

Вот так,

<section id="MostlyRecommended">
        <div>
            <h1>MOST POPULAR</h1>
        </div>
        <?php 
            include 'popular.php';
        ?>
        <div>
            <?php 

                for($i=0;$i<6;$i++){
                    $array = json_decode($posterArray[$i]);
            ?>
                <figure class="col-8 col-sm-4">
                    <img alt="<?php echo $array->Title?>" src="<?php echo $array->Poster?>">
                </figure>
            <?php
                }
            ?>
        </div>
        <div class="sliderButtonContainer">
            <div>
                <span class="slider active"></span>
                <span class="slider"></span>
                <span class="slider"></span>
                <span class="slider"></span>
                <span class="slider"></span>
                <span class="slider"></span>
            </div>
        </div>
    </section>

$ posterArray - это массив из популярных. php.

Добавлен новый div после первого div в разделе # MostlyRecommended and made a для l oop для рендеринга фигуры, что на 100% эквивалентно

divElement.insertAfter('#MostlyRecommended>div:first-child');

в jQuery

, но дизайн, который я вижу,

видите, у меня совсем другой и некрасивый дизайн. В чем может быть причина?