Javascript перебирает элементы и заменяет элементы в HTML

Ответ 1

Повторение изображений

Есть две вещи, способствующие повторному поведению изображения. Во-первых, как указано в другом ответе, счетчик циклов жестко закодирован до 20. Таким образом, если вы пройдете пять изображений, каждый будет повторяться четыре раза. Изменение 20 на длину массива Imgs предотвратит это.

Во-вторых, функция GenerateItems() всегда возвращает результаты.

если в массиве 50 изображений, затем отобразите эти изображения, 20 на страницу, а затем остановите

Это означает, что GenerateItems() нужно будет вернуть пустой набор (или не вызываться) после того, как будут отображены все 50 изображений. Наивный подход может включать глобальную переменную подсчета страниц. В этом кодепе я добавил такую ​​переменную, чтобы ограничить количество страниц, например:

var pagesServed = 0;

$(document).ready(function(){ 
    $grid = $('#grid-content');
.....
function GenerateItems(){
    console.log("generating items");
    var items = '';
    if (++pagesServed > 2) {
       return items; 
    }
    for(var i=0; i < Imgs.length; i++){
      ....

Отправка серверной части

В случае использования в реальной жизни вы, вероятно, получаете этот список ссылок на изображения с вашего сервера, который связан со второй частью вашего вопроса.

Вы можете легко отобразить эти divs на стороне сервера. Функция GenerateItems() сделала бы вызов AJAX на вашем конце, чтобы получить div, а не создавать их в javascript. Этот PHP-код может выглядеть примерно так:

<?php
require_once __DIR__.'/vendor/autoload.php';

session_start();

$Imgs = [
    'https://tympanus.net/Development/GridLoadingEffects/images/1.jpg',
    'https://tympanus.net/Development/GridLoadingEffects/images/3.jpg',
    'https://d13yacurqjgara.cloudfront.net/users/64706/screenshots/1167254/attachments/152315/SUGARSKULL-01.png',
    'https://tympanus.net/Development/GridLoadingEffects/images/8.jpg',
    'https://tympanus.net/Development/GridLoadingEffects/images/10.png',
    'https://tympanus.net/Development/GridLoadingEffects/images/14.png',
    'https://tympanus.net/Development/GridLoadingEffects/images/9.jpg',
    'https://tympanus.net/Development/GridLoadingEffects/images/13.png',
    'https://tympanus.net/Development/GridLoadingEffects/images/12.png',
    'https://tympanus.net/Development/GridLoadingEffects/images/4.jpg',
    'http://www.thedrum.com/uploads/news/172673/DzrMPF_DeezerPoster_MusicSoundBetterWithYou_03.jpg'
];

$items = '';

for ($i=0; $i < 20; $i++){
    $items .= '<div class="grid-item c' . ($i % 9) . ' wow fadeInUp" ><a href=""><img src="' . $Imgs[$i % count($Imgs)] . '" /></a></div>';
}
header('Access-Control-Allow-Origin: *');
printf($items);

Тогда GenerateItems() будет выглядеть примерно так:

  function GenerateItems(){
      console.log("generating items");
      var fetched =  fetch('http://localhost:8000').then(function(data) {
          return data.text();
      });

      return fetched;
    }

И revealItems изменен, чтобы иметь дело с обещанием:

$.fn.revealItems = function($items){
    var self = this;
    var iso = this.data('isotope');
    var itemSelector = iso.options.itemSelector;
    $items.then(function($fetcheditems) {
        console.log($fetcheditems);
        $($fetcheditems).hide();
        $(self).append($fetcheditems);
        $($fetcheditems).imagesLoaded().progress(function(imgLoad, image){
            var $item = $(image.img).parents(itemSelector);
            $item.show();
            iso.appended($item);
        });
    });
    return this;
}

Я приведу пример, который отображает эти div на стороне сервера на GitHub. Отказ от ответственности - это минимальный пример - я не стал работать с стилем WOW, и поддержка CORS минимальна (например, нет заголовка Access-Control-Allow-Credentials).

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

Ответ 2

• Для первого вопроса я бы изменил процедуру GenerateItems

  function GenerateItems(){
      var items = '';
      var limit = Imgs.length > 20 ? 20 : Imgs.length;
      for(var i=0; i < limit; i++){
          items += '<div class="grid-item c'+(i%9)+' wow fadeInUp" ><a href=""><img src="'+Imgs[i%Imgs.length]+'" /></a></div>';
      }
      return $(items);
  }
  

Но можете ли вы предоставить plunter или Codepen пример с дизайном PLZ?

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

a) Затем только что определенная функция из файла JS:

function infiniteList(selector){
    $grid = $(selector);

..... }

b) присоединить JS файл в заголовке index.html

c) вызвать функцию с нужным селектором в разделе $(document).ready в index.html script (поместить его перед закрывающим тегом).

var selector = ...//some calculation to get selector
$(document).ready(infiniteList(selector));

Ответ 3

Для первого вопроса, я думаю, вы просто хотите избавиться от бесконечного прокрутки. Проверьте здесь https://codepen.io/anon/pen/mqawpy Просто комментарий строка №. 117 вашего пера.

//$(window).scroll(Infinite);

И во-вторых, вы можете использовать тег для вставки содержимого HTML, т.е. тега "..." HTML с помощью PHP. здесь - Как написать html-код внутри <? php? >