%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/right-to-left.html

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

    <title>right to left</title>

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

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

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

</head>
<body>

<h1>right to left</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="../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/jquery-bridget/jquery.bridget.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('#basic');
            var iso = new Isotope(container, {
                isOriginLeft: false,
                masonry: {
                    columnWidth: 60
                }
            });
        })();

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

    });
</script>

</body>
</html>

Zerion Mini Shell 1.0