bootstrap5和masonry瀑布流重叠错位有效代码

bootstrap5和masonry瀑布流重叠错位有效代码

2023.05.19 01:55 41 0
主页 / 前端 / bootstrap5和masonry瀑布流重叠错位有效代码

使用 masonry 制作瀑布流时,根据 bootstrap 官方示例代码未成功
搜索测试后,使用以下代码解决

<script type="text/javascript">
var $grid = document.querySelector('#img-grid');
var msnry = new Masonry($grid, {
itemSelector: '.col-6',
percentPosition: true
});
var $images = $grid.querySelectorAll('#img-grid img');
$images.forEach(function (el) {
el.addEventListener('load', function () {
msnry.layout();
});
});
</script>
评论(0) 评论本文