Блог

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

Я не уверен, почему, но интервал в каждом столбце разный. Я включил как jquery, так и bootstrap. Подводя итог тому, что делает страница: у меня практически пустой документ (за исключением заголовка и строки меню), и я динамически загружаю изображения, поиск которых выполняется с помощью API Flicker. Страница написана в ejs в соответствии с требованиями проекта, как показано ниже:

 lt;%- include ('../partials/header') %gt; lt;bodygt;  lt;%- include ('../partials/menu') %gt;  lt;div class="container-fluid py-4" id="content"gt;  lt;div class="grid" id="gallery"gt;  lt;!-- Auto-populated --gt;  lt;/divgt;  lt;/divgt; lt;/bodygt; lt;footergt;  lt;%- include('../partials/footer') %gt; lt;/footergt; lt;/htmlgt;  

Javascript запускается кнопкой поиска в заголовке, но packery вызывается только в первой строке и в конце цикла при загрузке каждого изображения.

 var $grid = $('.grid').packery({  itemSelector: '.grid-item',  columnWidth: '.grid-sizer',  percentPosition: true, })  function getApiCall(event) {  event.preventDefault();  if (search_query)   $(document).ready(() =gt; {  $.ajax({url:url, dataType:"json"}).then(data =gt; {  document.getElementById("gallery").innerHTML = ''    data.photos.photo.forEach(image =gt; {  var img_src = `https://live.staticflickr.com/${image.server}/${image.id}_${image.secret}.jpg`  var img_link = `https://www.flickr.com/photos/${image.owner}/${image.id}`  var card = 'lt;div class="grid-item"gt;'  card  = `lt;a href=${img_link}gt;`  card  = `lt;img src=${img_src}gt;lt;/agt;`  card  = `lt;p class="p-2"gt;${image.title}lt;/pgt;`  card  = 'lt;/divgt;'  $grid.packery().append(card).packery('layout');  });  });  });  return false; }  

Это то, что у меня есть для css:

 .grid-item gt; a gt; img {width:100%;} .gutter-sizer { width: 2%; } .grid-sizer, .grid-item { width: 23%; } .grid-item {  float: left;  border-radius: 5px;  background-color: white; }  

Пожалуйста, дайте мне знать, если я выдам какую — либо соответствующую информацию. Мне нужна помощь, чтобы выяснить, как исправить проблемы с расстоянием и водосточными желобами. Заранее благодарю вас!