JS & CSS Masonry Blocks Not Stacking Pretty - CSS-Tricks

This topic is empty.

Viewing 1 post (of 1 total)

Author

Posts

September 30, 2014 at 6:24 am #185075

Participant

No matter what I do, I cannot seem to get my masonry blocks to stock right. They’re all out of sync. And when I do manage to get them stacked correctly, the transition animations don’t work. When I get the transitions animations working, the stacking order goes to crap. What am I doing wrong here?

Here’s the test site…

And here’s the source code:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation 5.4.3 | Test Site</title>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
    <link rel="stylesheet" href="css/foundation.min.css" />
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/safe.css" />
  </head>
  <body class="split">
    <header class="left">
      <a class="brand brand-bg" title="This is a Demo Page" href="#"><img src="//fs01.androidpit.info/a/c0/80/logo-me-c080cf-w192.png" alt="Logo"></a>
      <nav class="site-nav" id="navigation">
        <ul class="main-nav">
          <li class="browse "><a class="main-nav-item" href="#"><strong>LINK 1</strong> <span class="subhead">Sub-Head 1</span> <i class="ss-navigateright icon"></i></a></li>
          <li class="learn "><a class="main-nav-item" href="#"><strong>LINK 2</strong> <span class="subhead">Sub-Head 2</span> <i class="ss-navigateright icon"></i></a></li>
          <li class="discover "><a class="main-nav-item" href="#"><strong>LINK 3</strong> <span class="subhead">Sub-Head 3</span> <i class="ss-navigateright icon"></i></a></li>
        </ul>
      </nav>
    </header>
    <div class="right">
      <div class="grid home-grid isotope clearfix" id="griddo">
        <div class="grid-cell isotope-item four-wide four-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item triple-wide triple-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item double-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
      </div>
    </div>

    <script type="text/javascript" src="js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.0.0/isotope.pkgd.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            var $container = $('#griddo');

            var iWW = $(window).width();
            var iDivisor = 3;
            if (iWW <= 768) {
                iDivisor = 2;
            } else if (iWW <= 1024) {
                iDivisor = 3;
            } else if (iWW <= 1440) {
                iDivisor = 4;
            } else {
                iDivisor = 5;
            }

            var colWidth = Math.floor( $container.width() / iDivisor );
            $('.single-wide').width(colWidth);
            $('.double-wide').width(colWidth * 2);
            $('.triple-wide').width(colWidth * 3);
            $('.four-wide').width(colWidth * 4);
            $('.full-wide').width( $container.width() );

            // console.log(colWidth);

            // INITIALIZE ISOTOPE
            $container.isotope({
                // OPTIONS...
                resizable: false, // DISABLE NORMAL RESIZING
                // SET COLUMNWIDTH TO A PERCENTAGE OF CONTAINER WIDTH
                masonry: {
                    columnWidth: colWidth
                }
            });

            // UPDATE COLUMNWIDTH ON WINDOW RESIZE
            $(window).smartresize(function() {

                var iWW = $(window).width();
                var iDivisor = 3;
                if (iWW <= 768) {
                    iDivisor = 2;
                } else if (iWW <= 1024) {
                    iDivisor = 3;
                } else if (iWW <= 1440) {
                    iDivisor = 4;
                } else {
                    iDivisor = 5;
                }

                var colWidth = Math.floor( $container.width() / iDivisor );
                $('.single-wide').width(colWidth);
                $('.double-wide').width(colWidth * 2);
                $('.triple-wide').width(colWidth * 3);
                $('.four-wide').width(colWidth * 4);
                $('.full-wide').width( $container.width() );

                // console.log(colWidth);

                $container.isotope({
                    // UPDATE COLUMNWIDTH TO A PERCENTAGE OF CONTAINER WIDTH
                    masonry: {
                        columnWidth: colWidth
                    }
                });
            });

        });
    </script>
  </body>
</html>

Author

Posts

Viewing 1 post (of 1 total)

The forum ‘JavaScript’ is closed to new topics and replies.