Infinite scroll with 2 columns

Questions
1

In my design there is a switch layout for products page, like most ecommerce websites view as grid or list.

When using infinite scroll, you need to set a height, for list (1 product / row) all good, but when I have 2 columns there’s a problem.
Tried to make height/2 but even like that, the bottom space sometimes is bigger sometimes is less… and on scroll sometimes i get all 10 products, sometimes I get only 1 product in bottom page.

This is my code:

var productsView = 'list' // 
var x = productsView == "list" ? 400 : 200; // for demo
var RecordsInterval = window.setInterval(function(){
  if (typeof LastRecords === 'undefined') {
    $("#catalog").html("<p class='text-center'>No products.</p>");
    clearInterval(RecordsInterval);
    return false;
  } else {
    clearInterval(RecordsInterval);
    var lastItemIndex = 0;
    app.virtualList.create({
      el: '#catalog',
      height: x,
      dynamicHeightBufferSize: 2,
      on: {
        itemsAfterInsert: function (virtualList, fragment) {
          $('img.lazy').trigger('lazy'); 
          // this doesnt work from begining, only if i go to another page and return to curent
        }
      },
      renderItem: function (item) {
        return '<li class="col-50">product</li>'; // or col-100
      }
  });
  var allowInfinite = true;
  var maxItems = 200;
  $('.infinite-scroll-content').on('infinite', function () {
    if (!allowInfinite) return;
    allowInfinite = false;
    current_page = current_page + 1;
    ajax('GET', 'url/products?current_page='+current_page, function(response){
      allowInfinite = true;
      if (lastItemIndex >= maxItems) {
        app.infiniteScroll.destroy('.infinite-scroll-content');
        $('.infinite-scroll-preloader').remove();
        return;
      }
      VLViewRecords.appendItems(response.items);
    });
}, 1000);

What I am doing wrong?