Idiomati c способ использования bootstrap для размещения шаблона сетки переменных элементов - PullRequest
Новая
       22

Idiomati c способ использования bootstrap для размещения шаблона сетки переменных элементов

0 голосов
/ 15 февраля 2020

Я учусь сначала использовать утилиту css, чтобы создать макет шаблона сетки для переменного числа результатов поиска. Внешний вид, которого я хочу достичь, описывается этим изображением здесь:

enter image description here

Это было мое решение с использованием bootstrap css framework. 

function loadMore() {
   fetch('search-results.php?current='+document.querySelectorAll('.item').length)
   .then(response=>response.text())
   .then(result=>document.querySelector('.results').innerHTML += result);
}
body,div {padding:0;margin:0;}

.item {
  display:block;
  background:#333;
  color:white;
  border:2px solid white;
}

.item.col-12 {
  height:75vh;
}
.item.col-6 {
  height:50vh;
}
.item.col-4 {
  height:30vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="results"></div>
<button type="button" onClick="loadMore()">Load More</button>

// PHP FILE - результаты поиска. php

<?php
//$n = rand(1,10);
$n = $_REQUEST['current'] < 1 ? 1 : 8;
for($c=0;$c<$n;$c++)
{
  $current = $c+intval($_REQUEST['current']);
  if(
    $current === 0 ||
    ($current-1)%8 === 0 ||
    ($current-3)%8 === 0 ||
    ($current+2)%8 === 0
  )
    echo '<div class="row">';

  if($current === 0)
    echo '<div class="item col-12">'.$current.'</div>';
  else if(($current-1)%8 === 0 || ($current-2)%8 === 0)
    echo '<div class="item col-6">'.$current.'</div>';
  else
    echo '<div class="item col-4">'.$current.'</div>';


  if(
    $current === 0 ||
    ($current-2)%8 === 0 ||
    ($current-2)%8 === 0 ||
    ($current-5)%8 === 0
  )
    echo '</div>';
}

Мой bootstrap подход имеет некоторые проблемы, которые я не знаю, как решить:

  1. Когда search-results.php возвращает случайное количество элементов, открывающий и закрывающий теги <div class="row"> не вставляются в нужное время после несколько нажатий кнопки «Загрузить еще».

  2. Мне не нравится арифметика c, которую я должен выполнить, чтобы правильно разместить открытые и закрытые теги <div class="row"> и решить, стоит ли написать col-12 || col-6 || col-4. Все это кажется излишне сложным.

ВОПРОС: Какой идиоматический c способ использовать bootstrap (или любой другой метод css в первую очередь для утилит) для записи макет сетки шаблонов, который получает случайное число результатов?

ДОПОЛНИТЕЛЬНО - ПОДХОДНЫЙ ПЛАН

Моя проблема, описанная выше, может быть решена с использованием простого подхода CSS в виде здесь показан этот код:

// CSS FILE 

body,div {padding:0;margin:0;}
.results {
  display:flex;
  flex-wrap:wrap;
}
.item {
  display:block;
  background:#333;
  color:white;

  box-sizing:border-box;
  padding:10px;
  width:33.333%;
  height:30vh;
  border:2px solid white;
}
.item:nth-child(1) {
  width:100%;
  height:75vh;
}
.item:nth-child(8n+2),
.item:nth-child(8n+3) {
  width: 50%;
  height:50vh;
}

// PHP FILE 

<?php
$n = rand(1,10);
for($c=0;$c<$n;$c++)
  echo '<div class="item">'.($c+intval($_REQUEST['current'])).'</div>';

Код PHP намного проще и мне не нужно разбираться с <div> элементами.

...