Masonry JS瀑布流布局

最新推荐文章于 2024-09-23 15:34:46 发布

夕空

最新推荐文章于 2024-09-23 15:34:46 发布

阅读量862

点赞数

分类专栏： javascript html 文章标签：瀑布流布局 Masonry 瀑布流

本文链接：https://blog.csdn.net/zhi_jie/article/details/90169991

版权

javascript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Masonry JS瀑布流布局</title>

<style>
li{list-style:none;}
ul{
    width:90%;
    margin:0 auto;
}
ul li{margin: 10px;}
.col-w1{ width:200px;}
.col-w2{width: 400px;}
.col-t1{width: 30%;}
ul li[class*=col-] img{
    border: 0;
    width: 100%;
}
.stamp{position: absolute; background: red;}
.stamp1{left: 45%; width: 50px;height: 600px;background: red;}
.stamp2{left: 40%; top: 400px; width: 20%;height: 50px;background: blue;}

</style>

</head>

<body>
    <button id="onStamp">戳记开关</button>
    <ul class="grid">
        <div class="stamp stamp1"></div>
        <li class="item col-w1"><img src="https://i0.hippopx.com/photos/477/768/839/swimmer-sport-swim-water-preview.jpg"><br><span>公路</span></li>
        <li class="item col-w2"><img src="https://i0.hippopx.com/photos/740/837/204/spices-cinnamon-sticks-odor-aroma-preview.jpg"><br><span style="font-size: 30px;">标题名2</span>标题名2标题名2</li>
		<li class="item col-w1"><img src="https://cdn.pixabay.com/photo/2018/01/01/01/57/woman-3053492__340.jpg"><br>标题名</li>
        <div class="stamp stamp2"></div>
		<li class="item col-t1"><img src="https://cdn.pixabay.com/photo/2018/02/01/12/51/mammal-3123179__340.jpg"></li>
		<li class="item col-w1"><img src="https://cdn.pixabay.com/photo/2018/05/04/10/30/team-3373638__340.jpg"></li>
		<li class="item col-w1"><img src="https://i0.hippopx.com/photos/971/691/698/mobile-phone-smartphone-3d-manipulation-preview.jpg"></li>
		<li class="item col-w2"><img src="https://i0.hippopx.com/photos/477/768/839/swimmer-sport-swim-water-preview.jpg">公路</li>
		<li class="item col-w1"><img src="https://cdn.pixabay.com/photo/2018/01/01/01/57/woman-3053492__340.jpg">标题名</li>
		<li class="item"><img src="https://i0.hippopx.com/photos/20/987/594/woman-young-rain-pond-preview.jpg"><br>标题名2标题名2标题名2</li>
		<li class="item col-w2"><img src="https://cdn.pixabay.com/photo/2018/05/04/10/30/team-3373638__340.jpg"></li>
		<li class="item"><img src="https://cdn.pixabay.com/photo/2018/01/09/22/51/rose-3072698__340.jpg"></li>
        <li class="item"><img src="https://cdn.pixabay.com/photo/2018/02/01/12/51/mammal-3123179__340.jpg"></li>
        <li class="item"><img src="https://i0.hippopx.com/photos/320/918/427/sky-clouds-sunlight-dark-preview.jpg"></li>
        <li class="item"><img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg"></li>
    </ul>

    <!-- 图片加载侦听插件 官网：https://masonry.desandro.com/-->
    <script src="imagesloaded.pkgd.min.js"></script>
    <!-- 瀑布流布局插件 官网：https://imagesloaded.desandro.com/-->
    <script src="masonry.pkgd.min.js"></script>
    <script type="text/javascript">
        //排除非item的不计算在内
        // var elem = document.querySelector('.grid');
        // var msnry = new Masonry( elem, {
        //     // options
        //     itemSelector: '.item',
        //     columnWidth: 200
        // });

        // element argument can be a selector string
        // for an individual element
        var msnry = new Masonry( '.grid', {
            itemSelector: '.item',
            stamp: '.stamp'
            // horizontalOrder: true //左至右
        });

        //每加载完毕一张图调用
        var imgLoad = imagesLoaded ('.grid');
        imgLoad.on( 'progress', function( instance, image ) {
            msnry.layout();
        });

        //----------------------------------
        //后续新加入元素处理：
        var node=document.createElement("LI");
        node.innerHTML='<img src="https://i0.hippopx.com/photos/20/987/594/woman-young-rain-pond-preview.jpg"><br>我是新加入的';
        node.classList.add("item")
        // console.log(node.childNodes);
        document.querySelector('.grid').appendChild( node );
        msnry.appended( node );
        msnry.layout();

        //----------------------------------
        //戳记开关事件：
        var isStamped = true;
        var stamp =  document.querySelectorAll('.stamp');
        document.getElementById("onStamp").onclick = function(){
            if(isStamped){
                msnry.unstamp('.stamp');
            }else{
                msnry.stamp('.stamp');
            }
            msnry.layout();
            isStamped = !isStamped;
        }

    </script>
</body>
</html>