2023年2月27日

bootstrap5带图瀑布流实现代码解决图片加载bug


一个bootstrap5项目切图中遇到的问题,bootstrap是非常优秀的跨屏响应式框架,是遵循移动优先原则的,该项目基于最新的bootstrap5框架布局,实现瀑布流效果,虽然bootstrap自带有结合瀑布流的代码示例,不过过于简单,无法解决该项目遇到的问题,于是查阅了国内外文档,通过更为完整的调用方法得以解决,同时遇到了图片未加载完生成的瀑布流排版错位,通过图片加载完后在执行瀑布流的方法解决。

 

下面附bootstrap5带图瀑布流实现代码解决图片加载bug,亲测有用:


<script type="text/javascript">

var $grid = document.querySelector('#my-grids');
var msnry = new Masonry($grid, {
itemSelector: '.col-sm-6',
percentPosition: true
});

var $images = $grid.querySelectorAll('#my-grids img');
$images.forEach(function (el) {
el.addEventListener('load', function () {
//console.log("Image is loaded: " + el.getAttribute("src"));
msnry.layout();
});
});
</script>

切图网长期致力于切图等前端工作,对于bootstrap非常熟悉,并且早期曾经自主开发过跨屏响应式框架quickly,对于响应式删格系统,一个框架包含的各个组件都了然于心,所以基于bootstrap去构建一个项目,就显得很容易了。

标签:, , , ,

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》