zoukankan      html  css  js  c++  java
  • 流式布局的使用方法--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();
  • 相关阅读:
    poj 3662 Telephone Lines
    费马小定理证明
    CodeForces 1058 F Putting Boxes Together 树状数组,带权中位数
    共价大爷游长沙 lct 维护子树信息
    牛客暑假多校 F RIKKA with Line Graph
    牛客暑假多校 H Prefix sum
    HDU-6437 Videos
    模板汇总——AC自动机
    模板汇总——逆元
    模板汇总——LCT
  • 原文地址:https://www.cnblogs.com/zhao1949/p/6494706.html
Copyright © 2011-2022 走看看