JSFiddle - React, Tailwind, and code Playground

by Jussia

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
 <div class="preview-list" id='preview-list'>
 <h1>222</h1>
     <div id="preview-list-items" v-for='image in images'>
     <p>!!!!!!!{{image.id}}</p>
     <img :src="image.url" alt="">
          
         </div> 
 <div class="clear-both"></div>
    <div id="preview-buttons">
     <button id="preview-show-more" class="btn btn-default">More</button>
 </div>
 <div class="clear-both"></div>
    </div>

CSS

img {
  height: 100px;
  width: auto;
}

JavaScript

var app = new Vue({
  el: '#preview-list',
  data: {
    images: []
  }
});
$(function() {
    
    var imgs = app.images;
    var prevScroll = 0,
        step = 1,
        requestAllowed = true, //запрос разрешен
         $pagination = $('.clear-both'),
        $list = $('#preview-list-items'),
        limit = 6,
        offset = 0,
        url = 'https://jsonplaceholder.typicode.com/photos';
        loadData();
        console.log('2', imgs);
        
        
    //при скролле страницы
    $(window).scroll(function() {

        var scroll = $(window).scrollTop(),
            endOfProducts = $pagination.offset().top - $(window).height(), // величина конца продуктов
            direction = scroll > prevScroll, //направление?
            stepMap = step >= 0 && step <= 3; //кол-во подгрузок

        if (step == 3) {
            requestAllowed = false;
            $('#preview-buttons a').show();
        } else {
            $('#preview-buttons a').hide();
        }

        if (scroll > endOfProducts && requestAllowed && direction && stepMap) {
            loadData();
        }

        prevScroll = scroll;
    });

    $('#preview-show-more').click(function() {
        $(this).blur();
        step = 0;
        requestAllowed = true;
        $('#preview-buttons a').hide();
        loadData();
    });
   

    function loadData() {

        requestAllowed = false;
        $.ajax({
            cache: false,
            dataType: 'json',
            url: url,
            success: function(response) {
                requestAllowed = true;
                 var data = [];
                 for (var i = 0, max = response.length; i < max; i++) {
                 imgs.push(response[i]);
                 }
                imgs.length = limit;
                 console.log('i', imgs);
                limit += limit;
                step++;
            },
            error: function(error) {
                requestAllowed = true;
                console.log(error);
           ...