加入CODE CHINA

· 不限速    · 不限空间    · 不限人数    · 私仓免费

免费加入
    README.md

    Masonry

    Cascading grid layout library

    Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

    See masonry.desandro.com for complete docs and demos.

    Install

    Download

    CDN

    Link directly to Masonry files on unpkg.

    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
    <!-- or -->
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

    Package managers

    npm: npm install masonry-layout --save

    Bower: bower install masonry-layout --save

    Support Masonry development

    Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed. Please consider supporting its development by purchasing a license for one of Metafizzy's commercial libraries.

    Initialize

    With jQuery

    $('.grid').masonry({
      // options...
      itemSelector: '.grid-item',
      columnWidth: 200
    });

    With vanilla JavaScript

    // vanilla JS
    // init with element
    var grid = document.querySelector('.grid');
    var msnry = new Masonry( grid, {
      // options...
      itemSelector: '.grid-item',
      columnWidth: 200
    });
    
    // init with selector
    var msnry = new Masonry( '.grid', {
      // options...
    });

    With HTML

    Add a data-masonry attribute to your element. Options can be set in JSON in the value.

    <div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      ...
    </div>

    License

    Masonry is released under the MIT license. Have at it.


    Made by David DeSandro

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/desandro/masonry

    发行版本 22

    v4.2.2 - float position values

    全部发行版

    贡献者 11

    开发语言

    • HTML 58.5 %
    • JavaScript 37.0 %
    • CSS 4.5 %