title: “ bootstrap+imagesLoaded+masonry+carouse瀑布流、轮播图\t\t”
tags:
- bootstrap
- imagesLoaded
- masonry
url: 1130.html
id: 1130
categories: - 前端
date: 2018-04-17 21:51:37
介绍
masonry是js瀑布流插件，imagesLoaded可实现对图像加载状态的事件处理。选用masonry是因为此框架不仅适用于img标签，可直接用于div标签，可更好地和bootstrap组合使用。Carouse是bootstrap插件可以实现轮播图效果。下面适用于bootstrap3
瀑布流范例
html代码
js
css
.masonry-item {
float: left;
}
其中id=masonry-images是流的容器，而masonry-item是流中每一个内容div的class，注意让masonry-item在masonry-images的下级。 js中itemSelector 要填写内容class。 gutter是每个内容框之间的间距，因为上面用了bootstrap，使用的是col-md-4，12/4=3每行显示三个，所以gutter要设置为0，增加了间距会导致一行不能正好放置3个
图片加载慢导致排版错乱
按照上面写的：var container = $(‘#masonry-images.masonry-item’);等于是每一个内容的图片加载完成执行一次对这个图片的排版，若下面的图片比上面的先加载完成会出现，下方覆盖上方内容的情况，应以一定途径保证图片加载顺序，否则可使用var container = $(‘#masonry-images’);等于是让整个容器的所有图片加载完成后再统一进行排版。
imagesLoaded说明
下面转自https://segmentfault.com/a/1190000007316974
// jQuery配置方式
.imagesLoaded(%20function()%20%7B%0A%20%20%2F%2F%20%E5%9B%BE%E7%89%87%E5%8A%A0%E8%BD%BD%E5%90%8E%E6%89%A7%E8%A1%8C%E7%9A%84%E6%96%B9%E6%B3%95%0A%7D)%3B%0A%2F%2F%20javaScript%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F%0Avar%20imgLoad%20%3D%20imagesLoaded(%20’%23container’%2C%20function()%20%7B%0A%20%20%20%20%2F%2F%20%E5%9B%BE%E7%89%87%E5%8A%A0%E8%BD%BD%E5%90%8E%E6%89%A7%E8%A1%8C%E7%9A%84%E6%96%B9%E6%B3%95%0A%7D)%3B%0A%2F%2F%E4%B8%8B%E9%9D%A2%E6%98%AF%E5%85%A8%E9%83%A8%E5%9B%BE%E7%89%87%E5%8A%A0%E8%BD%BD%E7%9A%84%E4%BA%8B%E4%BB%B6%E6%B5%81%0A#card=math&code=%28%27%23container%27%29.imagesLoaded%28%20function%28%29%20%7B%0A%20%20%2F%2F%20%E5%9B%BE%E7%89%87%E5%8A%A0%E8%BD%BD%E5%90%8E%E6%89%A7%E8%A1%8C%E7%9A%84%E6%96%B9%E6%B3%95%0A%7D%29%3B%0A%2F%2F%20javaScript%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F%0Avar%20imgLoad%20%3D%20imagesLoaded%28%20%27%23container%27%2C%20function%28%29%20%7B%0A%20%20%20%20%2F%2F%20%E5%9B%BE%E7%89%87%E5%8A%A0%E8%BD%BD%E5%90%8E%E6%89%A7%E8%A1%8C%E7%9A%84%E6%96%B9%E6%B3%95%0A%7D%29%3B%0A%2F%2F%E4%B8%8B%E9%9D%A2%E6%98%AF%E5%85%A8%E9%83%A8%E5%9B%BE%E7%89%87%E5%8A%A0%E8%BD%BD%E7%9A%84%E4%BA%8B%E4%BB%B6%E6%B5%81%0A)(‘#container’).imagesLoaded()
.always( function( instance ) {
console.log(‘图片已全部加载，或被确认加载失败’);
})
.done( function( instance ) {
console.log(‘图片全部加载成功’);
})
.fail( function( instance ) {
console.log(‘图片已全部加载，且至少一个图片加载失败’);
})
.progress( function( instance, image ) {
console.log(‘每张图片加载完’);
var result = image.isLoaded ? ‘loaded’ : ‘broken’;
console.log( ‘加载结果 ‘ + result + ‘ 图片地址 ‘ + image.img.src );
});
// javaScript方式
imgLoad.on( ‘always’, onAlways);
轮播图
结合上面的例子，做修改，将第一个内容框的单张图片改成轮播图，首先已经包含了bootstrap.min.js文件，若只需要轮播图，请单独包含carouse.js，下面是一个内容的html
[
若有收获，就点个赞吧
0 人点赞
