%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/tjamichg/intranet.tjamich.gob.mx/intranet/common/vendors/isotope/examples/
Upload File :
Create Path :
Current File : /home/tjamichg/intranet.tjamich.gob.mx/intranet/common/vendors/isotope/examples/stamps.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">

    <title>stamps</title>


    <link rel="stylesheet" href="examples.css"/>

    <style>

        #alpha .stamp1 {
            width: 30%;
            height: 100px;
            left: 30%;
            top: 20px;
        }

        #alpha .stamp2 {
            width: 200px;
            height: 50px;
            left: 20px;
            top: 50px;
        }

        #beta {
            border-style: solid;
            border-width: 40px 30px 20px 10px;
            padding: 10px 20px 30px 40px;
        }

        #beta .stamp1 {
            width: 30%;
            height: 100px;
            left: 10%;
            top: 20px;
        }

        #beta .stamp2 {
            width: 200px;
            height: 50px;
            right: 20px;
            top: 50px;
        }

    </style>

</head>
<body>

<h1>stamps</h1>

<div id="alpha" class="container">
    <div class="stamp stamp1"></div>
    <div class="stamp stamp2"></div>
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item"></div>
</div>

<div id="beta" class="container">
    <div class="stamp stamp2"></div>
    <div class="stamp stamp1"></div>
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item"></div>
</div>

<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
<script src="../bower_components/eventie/eventie.js"></script>
<script src="../bower_components/doc-ready/doc-ready.js"></script>
<script src="../bower_components/get-style-property/get-style-property.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/matches-selector/matches-selector.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../bower_components/masonry/masonry.js"></script>

<script src="../js/item.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/masonry.js"></script>

<script>
    docReady(function () {
        (function () {
            var container = document.querySelector('#alpha');
            var iso = new Isotope(container, {
                itemSelector: '.item',
                stamp: '.stamp',
                masonry: {
                    columnWidth: 60,
                    gutter: 10
                }
            });

        })();

        (function () {
            var container = document.querySelector('#beta');
            var iso = new Isotope(container, {
                stamp: '.stamp',
                masonry: {
                    columnWidth: 60,
                    gutter: 10
                }
            });

        })();

    });
</script>

</body>
</html>

Zerion Mini Shell 1.0