一个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去构建一个项目，就显得很容易了。
特别声明
本文仅代表作者观点，不代表本站立场，本站仅提供信息存储服务。