JSFiddle - React, Tailwind, and code Playground

by Dragan Gaić

HTML

<script src="https://raw.githubusercontent.com/ed-lea/jquery-collagePlus/master/jquery.collagePlus.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>
            
            <div data-role="content">
                <div class="collage">
                    <img src="http://mywaiter.my/images/food1.jpg"/>
                    <img src="http://mywaiter.my/images/food2.jpg"/>
                    <img src="http://mywaiter.my/images/food3.jpg"/>
                    <img src="http://mywaiter.my/images/food4.jpg"/>
                    <img src="http://mywaiter.my/images/food5.jpg"/>
                    <img src="http://mywaiter.my/images/food6.jpg"/>
                    <img src="http://mywaiter.my/images/food7.jpg"/>
                    <img src="http://mywaiter.my/images/food8.jpg"/>
                    <img src="http://mywaiter.my/images/food9.jpg"/>
                </div>
        </div>
        
        <div data-role="footer" data-position="fixed">
            
        </div>
    </div> 
</div>  
</body>
</html>

CSS

body{
    background-color:#F1F1F1;
}
.collage img{
    opacity:0;
    box-shadow:0px 3px 4px #dcdcdc;
    border-radius: 6px;
    /* 
    * Change this to try different borders
    */
    border:6px solid #FFF;
}
 .collage{
    /* 
     * Change this to set the spacing of the images in the grid
     */
    padding:10px;
  }

 .footnote{
    font-family:arial;
    color:#999;
    padding:10px;
    font-size:12px;
 }
 .footnote a{
    color:#09f;
    text-decoration:none;
 }




/* from transitions.css */
/*

A library of transitions for revealing the loaded images
(Heavily) Inspired by http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/

*/

.effect-parent {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
    }


/* EFFECT 1 */
.effect-1 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -300px;
    -moz-transform-origin: 50% 50% -300px;
    transform-origin: 50% 50% -300px;
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -webkit-animation: fly ease-in-out forwards;
    -moz-animation: fly ease-in-out forwards;
    animation: fly ease-in-out forwards;
}
@-webkit-keyframes fly {
    100% { -webkit-transform: rotateX(0deg); opacity: 1; -webkit-transform-origin:50% 50% 0; }
}

@-moz-keyframes fly {
    100% { -moz-transform: rotateX(0deg); opacity: 1; -moz-transform-origin:50% 50% 0; }
}

@keyframes fly {
    100% { transform: rotateX(0deg); opacity: 1; transform-origin:50% 50% 0; }
}



/* EFFECT 2 */
.effect-2 {
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    transform: translateY(200px);
    -webkit-animation: moveUp ease forwards;
    -moz-animation: moveUp ease forwards;
    animation: moveUp ease forwards;
}

@-webkit-keyframes moveUp {
    to { -webkit-transform:...

JavaScript

/*$(document).on('pageshow', '#index', function(){ 
    $('.collage').collagePlus();         
});*/


$(document).on('pagecontainershow', function (e, ui) {
    var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage').attr('id');
    if(activePage === 'index') {
        $('.collage').collagePlus(
            {
                // change this to adjust the height of the rows
                'targetHeight' : 100,
                // change this to try different effects
                // valid effets = effect-1 to effect-6
                'effect' : "effect-1"
            }
        );   
    }
});