jQuery瀑布流简单实现（imagesloaded+masonry）

Posted 2021-04-08 GeekerNote

imagesloaded+masonry

实例效果

masonry是一款基于jQuery的瀑布流插件，使用简单。

magesloaded也是基于jQuery的一款插件，但是它的作用是检测图片加载并执行相应的处理。

1.引入依赖

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery.imagesloaded/2.1.0/jquery.imagesloaded.js"></script>
<script src="https://cdn.bootcss.com/masonry/4.2.1/masonry.pkgd.min.js"></script>

貌似imagesloaded的高版本有bug总是出错，上面的组合是一个亲测能够起作用的组合。

2.html结构代码

<div id="ms" class="ctn">
    <div class="box">
    <img src="1.jpg">
    接撒的开发接口和高科技的身份和高科技的方式更加看好的风景看故事看懂就分开
    </div>
    <div class="box"><img src="2.jpg"></div>
    <div class="box"><img src="3.jpg"></div>
    <div class="box"><img src="4.jpg"></div>
    <div class="box"><img src="1.jpg"></div>
    <div class="box"><img src="2.jpg"></div>
    <div class="box"><img src="3.jpg"></div>
    <div class="box"><img src="4.jpg"></div>
    <div class="box"><img src="1.jpg"></div>
    <div class="box"><img src="2.jpg"></div>
    <div class="box"><img src="3.jpg"></div>
    <div class="box"><img src="4.jpg"></div>
    <div class="box"><img src="1.jpg"></div>
    <div class="box"><img src="2.jpg"></div>
    <div class="box"><img src="3.jpg"></div>
    <div class="box"><img src="4.jpg"></div>
    <div class="box"><img src="1.jpg"></div>
    <div class="box"><img src="2.jpg"></div>
    <div class="box"><img src="3.jpg"></div>
    <div class="box"><img src="4.jpg"></div>
</div>

3.定义CSS样式

<style>
.ctn{padding:20px;width:80%;margin:0px auto;}
.box{width:200px;float:left;border:1px solid gray; padding:10px;margin-bottom:20px;}
.box img{max-width:100%;}
</style>

4.实例化布局

<script>
$(function(){
    var $container = $('#ms');
    $container.imagesLoaded(function() {//图片加载完毕后执行
       $container.masonry({
          itemSelector: '.box',
          columnWidth:20,
       });
    }); 
});
</script>