Bootstrap 5 Infinite scroll

        
            
          // An array of icon names
          const icons = [
            'Sad-Tear',
            'Meh-Blank',
            'Smile-Wink',
            'Tired',
            'Surprise',
            'Kiss-Beam',
            'Laugh-Squint',
          ];

          // Get a scrollable container using an id attribute
          const basicElement = document.getElementById('basic-example');

          // An index of elements added after scrolling to the end of the container
          let itemIndex = 0;

          // items - an array of the created elements using the loop through icons array
          const items = icons.map((icon) => {
            // Create a list item element
            const element = document.createElement('li');

            // Change HTML code inside created list element using icon we are currently working on
            element.innerHTML = `
              <li class="list-group-item d-flex align-items-center">
                <i class="far fa-${icon.toLowerCase()} fa-3x me-4"></i>${icon}
              </li>
            `;

            // Return ready element
            return element;
          });

          // Add an event listener to the scrollable container. The event below is triggered when a user scrolls to the end of the container
          basicElement.addEventListener('complete.mdb.infiniteScroll', () => {
            // Return nothing when user appended all of the generated items
            if (itemIndex === icons.length - 1) return;

            // Append next element to the scrollable container
            basicElement.appendChild(items[itemIndex]);

            // Increment amount of items that are appended
            itemIndex++;
          });
      
        
    

        
            
          // Get a scrollable container using an id attribute
          const directionElement = document.getElementById('direction-example');

          // An index of elements added after scrolling to the end of the container
          let itemIndex = 0;

          // An array of icon names
          const icons = [
            'Sad-Tear',
            'Meh-Blank',
            'Smile-Wink',
            'Tired',
            'Surprise',
            'Kiss-Beam',
            'Laugh-Squint',
          ];

          // items - an array of the created elements using the loop through icons array
          const items = icons.map((icon) => {
            // Create a span element
            const element = document.createElement('span');

            // Add class mx-5 to the created element, which defines left and right margin
            element.classList.add('mx-5');

            // Change HTML code inside created span element using icon we are currently working on
            element.innerHTML = `
              <i class="far fa-${icon.toLowerCase()} fa-3x me-4"></i>
              ${icon}
            `;

            // Return ready element
            return element;
          });

          // Add an event listener to the scrollable container. The event below is triggered when a user scrolls to the end of the container
          directionElement.addEventListener('complete.mdb.infiniteScroll', () => {
            // Return nothing when user appended all of the generated items
            if (itemIndex === items.length - 1) return;

            // Append next element to the scrollable container
            directionElement.appendChild(items[itemIndex]);

            // Increment amount of items that are appended
            itemIndex++;
          });
        
        
    

        
            
          // Get a spinner, container with images and scrollable container using an id attribute
          const spinner = document.getElementById('spinner');
          const imagesContainer = document.getElementById('images');
          const infiniteContainer = document.getElementById('spinners-and-async-example');

          // Function that generates image with data from API
          const createImg = url => {
            // Create an image element
            let imgElement = document.createElement('img');

            // Add .img-fluid class to the element, it will adjust size of it to the container
            imgElement.classList.add('img-fluid');

            // Set a src attribute using parameter that is passed to the function
            imgElement.setAttribute('src', url);

            // Return ready image element
            return imgElement;
          }

          // Function that loads next image
          const loadImages = () => {
            // Make spinner visible
            spinner.style.display = 'block';

            // Fetch your API
            fetch('YOUR_API/getNextItem')
              .then(response => response.json)
              .then(imgUrl => {
                // Hide spinner after data loads
                spinner.style.display = 'none';

                // Append an image element generated by createImg function to the container with images
                imagesContainer.appendChild(createImg(imgUrl));
              });
          }

          // Add an event listener to the scrollable container. The event below is triggered when a user scrolls to the end of the container
          infiniteContainer.addEventListener('complete.mdb.infiniteScroll', loadImages);
        
        
    

        
            
          const postsContainer = document.getElementById('posts');
          const spinner = document.getElementById('spinner');

          const items = [
            {
              img: 'https://mdbcdn.b-cdn.net/img/Photos/Others/images/31.webp',
              title: 'This is an title of the article',
              text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam cupiditate veniam voluptatibus laudantium cum dolorem illo. Quos architecto deserunt saepe.',
            },
            {
              img: 'https://mdbcdn.b-cdn.net/img/Photos/Others/images/23.webp',
              title: 'This is an title of the article',
              text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam cupiditate veniam voluptatibus laudantium cum dolorem illo. Quos architecto deserunt saepe.',
            },
            {
              img: 'https://mdbcdn.b-cdn.net/img/Photos/Others/images/29.webp',
              title: 'This is an title of the article',
              text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam cupiditate veniam voluptatibus laudantium cum dolorem illo. Quos architecto deserunt saepe.',
            },
            {
              img: 'https://mdbcdn.b-cdn.net/img/Photos/Others/images/27.webp',
              title: 'This is an title of the article',
              text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam cupiditate veniam voluptatibus laudantium cum dolorem illo. Quos architecto deserunt saepe.',
            },
            {
              img: 'https://mdbcdn.b-cdn.net/img/Photos/Others/images/25.webp',
              title: 'This is an title of the article',
              text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam cupiditate veniam voluptatibus laudantium cum dolorem illo. Quos architecto deserunt saepe.',
            },
            {
              img: 'https://mdbcdn.b-cdn.net/img/Photos/Others/images/24.webp',
              title: 'This is an title of the article',
              text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam cupiditate veniam voluptatibus laudantium cum dolorem illo. Quos architecto deserunt saepe.',
            },
            {
              img: 'https://mdbcdn.b-cdn.net/img/Photos/Others/images/31.webp',
              title: 'This is an title of the article',
              text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam cupiditate veniam voluptatibus laudantium cum dolorem illo. Quos architecto deserunt saepe.',
            },
            {
              img: 'https://mdbcdn.b-cdn.net/img/Photos/Others/images/32.webp',
              title: 'This is an title of the article',
              text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam cupiditate veniam voluptatibus laudantium cum dolorem illo. Quos architecto deserunt saepe.',
            },
          ];

          const getPostTemplate = (post) => {
            // returns the HTML template with post's title, image & text
            return `
              <div class="col-md-6 mb-4">
                <div class="bg-image hover-overlay ripple shadow-1-strong rounded mb-4" data-mdb-ripple-color="light">
                  <img src="${post.img}" class="w-100 lazy"/>
                  <a href="#!">
                    <div class="mask" style="background-color: rgba(251, 251, 251, 0.2);">
                    </div>
                  </a>
                </div>
                <h5>${post.title}</h5>
                <p>${post.text}</p>
                <a class="btn btn-info btn-rounded" href="#!" role="button">Read more</a>
              </div>
            `;
          };

          // posts - array of templates
          const posts = items.map((item) => getPostTemplate(item));

          const generateRow = (firstPost, secondPost) => {
            // Returns a div.row element with two columns generated based on arguments
            let el = document.createElement('div');
            el.classList.add('row');

            el.innerHTML = `
              ${firstPost}
              ${secondPost}
            `;
            return el;
          };

          // rows - array of rows with two posts each
          const rows = [];

          // iterates over posts and creates a row for every two of them
          for (let i = 0; i < posts.length - 1; i += 2) {
            rows.push(generateRow(posts[i], posts[i + 1]));
          }

          // renderedItems - number of items already rendered
          let renderedItems = 0;

          const renderItems = (index) => {
            // timeout simulates delay in loading items (f.e. API call)
            setTimeout(() => {
              // hide spinner
              spinner.style.display = 'none';

              postsContainer.appendChild(rows[index]);
            }, 1500);
          };

          const loadItems = () => {
            if (renderedItems < rows.length) {
              // show spinner
              postsContainer.appendChild(spinner);
              spinner.style.display = 'flex';

              renderItems(renderedItems);

              renderedItems++;

              // Removes event listener after all items have been loaded
              if (renderedItems === rows.length) {
                window.removeEventListener('complete.mdb.infiniteScroll', loadItems);
              }
            }
          };

          // load items when window is scrolled to the end
          window.addEventListener('complete.mdb.infiniteScroll', loadItems);

          // init infinite scroll
          new mdb.InfiniteScroll(window);