Hi , i’m generating a catalogue with this php
<div id="product-list">
<div class="row">
<?php for($i=0; $i<50; $i++) : ?>
<?php
$n = rand(1, 8);
$m = 6;
?>
<div class="product-container col-lg-3 col-md-4 col-sm-4 col-xs-6">
<a class="product-link" href="<?php echo base_url($site.'/'.$catalogue.'/'.$section.'/'.$n) ?>">
<?php if(rand(1, 5) == 5) : ?>
<span class="outofstocklabel label label-danger">Out of stock</span>
<?php endif ?>
<figure>
<img src="<?php echo base_url('assets/img/catalogue/0'.$n.'/0'.$n.'-1.jpg') ?>" alt="" class="img-responsive" data-hover-link="<?php echo base_url('assets/img/catalogue/0'.$n.'/0'.$n.'-5.jpg') ?>">
<figcaption class="product-caption text-center">
<h3 class="text-uppercase bold">Saint Laurent</h3>
<h4>Black Studded Lambskin</h4>
<p class="bold">
<span class="currency">€</span>
<span class="price"><?php echo number_format(rand(90, 3500)) ?></span>
</p>
</figcaption>
</figure>
</a>
</div>
<?php endfor ?>
</div>
</div>
I’m using Airbnb Infinity.js to create the infinite scroll and my code:
var $newContent = $('.product-container');
var $el = $('#product-list .row');
$el.empty();
var listView = new infinity.ListView($el);
$newContent.each(function(){
listView.append( $(this) );
});
var listItems = listView.find('.product-container');
for(var index = 0, length = listItems.length; index < length; index++) {
listItems[index].remove();
}
For now my code is not working correctly. When i start scroll the .product-container item sometimes disappear .