var $container = $('.iso-box-wrapper'), $imgs = $('.iso-box img'); $container.imagesLoaded(function () { $container.isotope({ layoutMode: 'fitRows', itemSelector: '.iso-box' }); $imgs.load(function(){ $container.isotope('reLayout'); }) });
时间: 2024-04-27 13:24:11 浏览: 136
vue.js2.0 实现better-scroll的滚动效果实例详解
这段代码是用于实现图片的Isotope布局,其中:
- $container 是图片的容器,使用 jQuery 查找到 class 为 iso-box-wrapper 的元素;
- $imgs 是所有图片的集合,使用 jQuery 查找到所有 class 为 iso-box 的元素下的 img 标签;
- imagesLoaded 是一个插件,用于在所有图片加载完成后执行回调函数;
- isotope 是一个 jQuery 插件,用于实现图片的布局;
- layoutMode 指定布局模式,这里是 fitRows,即每行布局,可以根据实际需求设置;
- itemSelector 指定每个子元素的选择器,在这里是 '.iso-box';
- reLayout 是 Isotope 插件提供的方法,用于重新布局元素,这里是在图片加载完成后调用。
总之,这段代码实现了图片的自适应布局,当图片加载完成后,使用 Isotope 插件重新布局所有图片。
阅读全文