zoukankan      html  css  js  c++  java
  • masonry 随笔

    $.masonry( 'layoutItems', items, isStill ){
    // 容器调用masonry(子元素类标签,每个子元素,是否。。)
     msnry.layoutItems( items, isStill )
     }

    https://yunpan.cn/cM6DMxSvt7YSN  访问密码 6278   

    https://github.com/TianYouH/masonry   模版

    var mason = $('.grid').masonry({
    // 设置itemSelector。指定子元素将被用作项目元素的布局
    itemSelector: '.grid-item',
    
    // 追加参与布局子元素
    // stamp:"追加布局元素类";
    
    // 列宽
    columnWidth: 300,
    // 元素的大小布局与响应百分比宽度。columnWidth这是列宽。不设置默认为第一个元素宽
    
    //这个是列与列间距宽度 
    gutter: 50,
    
    // 允许父容器居中显示。需为父容器添加margin: 0 auto;样式设置
    // isFitWidth:true,
    
    // true从左向右 false从右向左 水平方向,默认true
    originLeft: false,
    
    // true自上而下 false自下而上 垂直方向,默认true
    originTop: false,
    
    // 响应式布局使用
    // 使用元素获取百分比设置
    // columnWidth: '.grid-sizer',
    // 按百分比设置位置
    // percentPosition: true
    
    // 禁止任何样式
    // containerStyle: null,
    
    // 窗口大小发生改变样式布局过渡时间。默认0.2
    // transitionDuration: '0.2s',
    // transitionDuration: 0,
    
    // 子元素改变,所有子元素逐步过渡。设置为一个CSS时间格式, '0.03s',或者在毫秒数, 30.
    // 默认值很快。 当发生事件回调该函数,即可重新排列
    // stagger: "0.03s"
    
    // 窗口大小改变是否重新排列。默认true
    // resize: false
    
    // 禁止布局初始化 默认true。false页面首次打开不布局,可通过事件执行布局
    // initLayout: false
    
    })
    // 含有图片时,等图片加载结束在执行
     var $grid = $('.grid').masonry({
     itemSelector: '.grid-item',
     });
     $grid.imagesLoaded().progress( function() {
     $grid.masonry();
     });

     

    mason.on( 'click', '.grid-item', function( event ) {
    // 删除子元素事件
    mason.masonry( 'remove', event.currentTarget ).masonry();
    });
    
    
    
    // 改变元素大小
    // mason.on( 'click', '.grid-item', function() {
    // $( this ).width(400);
    // mason.masonry();
    // });

     http://masonry.desandro.com/

  • 相关阅读:
    如何让自己拥有两年工作经验
    示波器入门使用方法
    模板显式、隐式实例化和(偏)特化、具体化的详细分析
    Dynamics CRM 2013 初体验(5):Business Rule
    Tomcat搭建
    岁月,时光,现实
    数据结构之链表单向操作总结
    iptables学习笔记
    知无涯者(The Man Who Knew Infinity)
    Dynamics CRM2016 Web API之Expand related entities & $ref & $count
  • 原文地址:https://www.cnblogs.com/huangjinliang/p/5815649.html
Copyright © 2011-2022 走看看