• 流式布局的使用方法--Masonry


    http://www.jq22.com/demo/masonry/

    范例

    css部分

    body {
        background-color: #c7cad0;
    }
    
    .post_box {
        background-color: #FFFFFF;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        font-size: 12px;
        padding: 10px 8px;
        width: 250px;
        height: auto;
        overflow: hidden;
        margin-bottom: 10px;
        position: relative;
        z-index: 5;
    }
    
    .container-fluid {
        margin-right: 100px;
        margin-left: 100px;
    }
    
    .post_box img {
        height: auto;
        width: 234px;
    }
        <div class="container-fluid">
            <div class="post_area" id="masonry">
                <div class="post_box">
                    <a target="_blank" href="/upload/browser/photos/293"><img alt="图片加载失败" src="/upload/photo/20170302/thumbnail/9f22c32aca3949398cde54e807cb129e.jpg" /></a>
                    <div class="caption">
                        <a target="_blank" href="/upload/browser/photos/293"><h4>测试更新</h4></a>
                        <p>
                            作者: <span>管理员</span>
                        </p>
                    </div>
                </div>
                <div class="post_box">
                    <a target="_blank" href="/upload/browser/photos/292"><img alt="图片加载失败" src="/upload/photo/20170302/thumbnail/cda7b7218f704559a53b668c60f36b06.jpg" /></a>
                    <div class="caption">
                        <a target="_blank" href="/upload/browser/photos/292"><h4>test update</h4></a>
                        <p>
                            作者: <span>管理员</span>
                        </p>
                    </div>
                </div>
            window.onload = function(){
                 var $container = $('#masonry').masonry({
                 // options
                 itemSelector: '.post_box',
                 gutter:10,
                 isAnimated: true
               });
                };
            //初始化图片流插件
           var $container = $('#masonry').masonry({
                  // options
                  itemSelector: '.post_box',
                  gutter:10,
                  isAnimated: true
                });
                         $('#masonry').masonry().append($items).masonry( 'appended', $items ).masonry();
  • 相关阅读:
    Vue框架构造
    JavaScript-改变this指向
    前端发展史
    python篇第10天【For 循环语句】
    python篇第10天【While 循环语句】
    python篇第8天【运算符】
    python篇第6天【数据类型】
    python篇第5天【变量】
    Python篇函数总结【输出函数】
    python篇第3天【编码规范】
  • 原文地址:https://www.cnblogs.com/zhao1949/p/6494706.html
Copyright © 2020-2023  润新知