Сначала вы должны заставить работать макет Masonry, а затем попытаться вставить его в контейнер начальной загрузки, чтобы избежать любых проблем с двумя системами макетов, мешающих друг другу.
Я сократил ваш HTML доминимум, необходимый для работы масонства, а также удаление карусели.Вот что я имел в виду под «минимальным, полным и проверяемым примером»:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-item { width: 200px; }
.grid-item img { width: 90%; }
</style>
</head>
<body>
<div class="grid">
<div class="grid-item">
<img class="d-block w-100" src="http://alexisgargaloni.fr/archive/images/raynoxdu707TCH1200_wroll.jpg" alt="">
<p> 1 Raynox DU707TCH 1200</p>
</div>
<div class="grid-item">
<img class="d-block w-100" src="http://alexisgargaloni.fr/archive/images/raynoxdu707TCH1200_wroll.jpg" alt="">
<p> 2 Raynox DU707TCH 1200</p>
</div>
<div class="grid-item">
<img class="d-block w-100" src="http://alexisgargaloni.fr/archive/images/raynoxdu707TCH1200_wroll.jpg" alt="">
<p> 3 Raynox DU707TCH 1200</p>
</div>
<div class="grid-item">
<img class="d-block w-100" src="http://alexisgargaloni.fr/archive/images/raynoxdu707TCH1200_wroll.jpg" alt="">
<p> Raynox DU707TCH 1200</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript">
$('.grid').masonry({
columnWidth: 200
});
</script>
</body>
</html>
В нижней части HTML-кода вы дважды инициализируете код масонства, используя два разных стиля.Требуется только один:
<script src="js/masonry.pkgd.min.js"></script>
<script type="text/javascript">
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer', <<-- I don't think this will work, for now use a number
percentPosition: true
});
</script>
...
<script src="js/imagesloaded.pkgd.min.js"></script>
<script> var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$grid.masonry({
// options...
});
}); </script>
В документации говорится
Все размеры элементов обрабатываются вашим CSS.
но я не смог найти размер, указанный в вашем CSS.
Как только вы начнете работать с основным масонством, начните добавлять карусели и т. Д. И посмотрите, не сломается ли он.Затем вы можете исправить одну вещь за один раз.
Здесь вы смешиваете две системы макетов, одну на основе столбцов (Bootstrap), а другую, используя систему «наилучшего соответствия».Если все ваши изображения имеют одинаковый размер и ориентацию, макет каменной кладки мало поможет, когда он принудительно помещается в контейнер Bootstrap фиксированной ширины.