%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/bottom-up.html

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

    <title>bottom up</title>

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

    <style>
        #stamped .stamp1 {
            width: 30%;
            height: 100px;
            left: 30%;
            bottom: 20px;
        }

        #stamped .stamp2 {
            width: 200px;
            height: 50px;
            left: 20px;
            bottom: 50px;
        }
    </style>

</head>
<body>

<h1>bottom up</h1>

<div id="basic" class="container">
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item w2 h2"></div>
    <div class="item w2"></div>
    <div class="item h3"></div>
    <div class="item w3"></div>
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item"></div>
    <div class="item w2 h4"></div>
    <div class="item w2"></div>
    <div class="item h5"></div>
    <div class="item w3"></div>
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item"></div>
    <div class="item w2 h5"></div>
    <div class="item w2"></div>
    <div class="item h3"></div>
    <div class="item w3"></div>
    <div class="item"></div>
</div>

<div id="stamped" class="container">
    <div class="stamp stamp1"></div>
    <div class="stamp stamp2"></div>
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item w2 h2"></div>
    <div class="item w2"></div>
    <div class="item h3"></div>
    <div class="item w3"></div>
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item"></div>
    <div class="item w2 h4"></div>
    <div class="item w2"></div>
    <div class="item h5"></div>
    <div class="item w3"></div>
    <div class="item"></div>
    <div class="item h4"></div>
    <div class="item"></div>
    <div class="item w2 h5"></div>
    <div class="item w2"></div>
    <div class="item h3"></div>
    <div class="item w3"></div>
    <div class="item"></div>
</div>

<script src="../components/classie/classie.js"></script>
<script src="../components/eventEmitter/EventEmitter.js"></script>
<script src="../components/eventEmitter/EventEmitter.min.js"></script>
<script src="../components/eventie/eventie.js"></script>
<script src="../components/doc-ready/doc-ready.js"></script>
<script src="../components/get-style-property/get-style-property.js"></script>
<script src="../components/get-size/get-size.js"></script>
<script src="../components/jquery-bridget/jquery.bridget.js"></script>
<script src="../components/matches-selector/matches-selector.js"></script>
<script src="../components/outlayer/item.js"></script>
<script src="../components/outlayer/outlayer.js"></script>

<script src="../masonry.js"></script>

<script>
    docReady(function () {
        (function () {
            var container = document.querySelector('#basic');
            var msnry = new Masonry(container, {
                isOriginTop: false,
                columnWidth: 60
            });
        })();

        (function () {
            var container = document.querySelector('#stamped');
            var msnry = new Masonry(container, {
                itemSelector: '.item',
                isOriginTop: false,
                columnWidth: 60,
                gutter: 10,
                stamp: '.stamp'
            });
        })();

    });
</script>

</body>
</html>

Zerion Mini Shell 1.0