HEX
Server: Microsoft-IIS/10.0
System: Windows NT ITPWINWEBSVR22 10.0 build 20348 (Windows Server 2022) AMD64
User: www.conferencesearch.co.uk (0)
PHP: 8.3.30
Disabled: NONE
$ pwd: D:/web/expressmusic/isotope-docs/isotope-docs/
Upload Files
File: D:/web/expressmusic/isotope-docs/isotope-docs/layout.html
<!doctype html>
<html class="export">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="filter &amp; sort magical layouts">

  <title>Isotope &#xB7; Layout</title>

    <!-- Isotope does not require any CSS files -->
    <link rel="stylesheet" href="css/isotope-docs.css" media="screen">

  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@metafizzyco">
  <meta name="twitter:url" content="http://isotope.metafizzy.co/layout.html">
  <meta name="twitter:title" content="Isotope Layout">
  <meta name="twitter:description" content="filter &amp; sort magical layouts">

</head>
<body class="page--layout" data-page="layout">

  <div class="nav">
    <h1 class="nav__title"><a href=".">Isotope</a></h1>
  
    <ol class="site-nav">
      <li class="site-nav__item site-nav__item--filtering">
        <a class="site-nav__item__link" href="filtering.html">Filtering</a></li>
      <li class="site-nav__item site-nav__item--sorting">
        <a class="site-nav__item__link" href="sorting.html">Sorting</a></li>
      <li class="site-nav__item site-nav__item--layout ">
        <a class="site-nav__item__link" href="layout.html">Layout</a>
      </li>
      <li class="site-nav__item site-nav__item--layout-modes sub-nav-parent">
        <a class="site-nav__item__link" href="layout-modes.html">Layout modes</a>
        <ul class="sub-nav">
            <li class="sub-nav__item sub-nav__item--masonry">
              <a class="sub-nav__item__link" href="layout-modes/masonry.html">masonry</a></li>
            <li class="sub-nav__item sub-nav__item--fitrows">
              <a class="sub-nav__item__link" href="layout-modes/fitrows.html">fitRows</a></li>
            <li class="sub-nav__item sub-nav__item--vertical">
              <a class="sub-nav__item__link" href="layout-modes/vertical.html">vertical</a></li>
            <li class="sub-nav__item sub-nav__item--packery">
              <a class="sub-nav__item__link" href="layout-modes/packery.html">packery</a></li>
            <li class="sub-nav__item sub-nav__item--cellsbyrow">
              <a class="sub-nav__item__link" href="layout-modes/cellsbyrow.html">cellsByRow</a></li>
            <li class="sub-nav__item sub-nav__item--masonryhorizontal">
              <a class="sub-nav__item__link" href="layout-modes/masonryhorizontal.html">masonryHorizontal</a></li>
            <li class="sub-nav__item sub-nav__item--fitcolumns">
              <a class="sub-nav__item__link" href="layout-modes/fitcolumns.html">fitColumns</a></li>
            <li class="sub-nav__item sub-nav__item--cellsbycolumn">
              <a class="sub-nav__item__link" href="layout-modes/cellsbycolumn.html">cellsByColumn</a></li>
            <li class="sub-nav__item sub-nav__item--horizontal">
              <a class="sub-nav__item__link" href="layout-modes/horizontal.html">horizontal</a></li>
        </ul>
      </li>
      <li class="site-nav__item site-nav__item--options">
        <a class="site-nav__item__link" href="options.html">Options</a></li>
      <li class="site-nav__item site-nav__item--methods">
        <a class="site-nav__item__link" href="methods.html">Methods</a></li>
      <li class="site-nav__item site-nav__item--events">
        <a class="site-nav__item__link" href="events.html">Events</a></li>
      <li class="site-nav__item site-nav__item--license">
        <a class="site-nav__item__link" href="license.html">License</a></li>
      <li class="site-nav__item site-nav__item--appendix">
        <a class="site-nav__item__link" href="appendix.html">Appendix</a></li>
      <li class="site-nav__item site-nav__item--faq">
        <a class="site-nav__item__link" href="faq.html">FAQ</a></li>
    </ol>
  
    <ul class="page-nav" data-js-module="page-nav">
<li class="page-nav__item page-nav__item--h2"><a href="#item-sizing">Item sizing</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#responsive-layouts">Responsive layouts</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#imagesloaded">imagesLoaded</a></li>
</ul>
  </div>


  <div id="content" class="main">
    <div class="primary-content">
        <h1>Layout</h1>


<h2 id="item-sizing">Item sizing</h2>

<p>All sizing and styling of items is handled by your own CSS.</p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="html"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid&quot;</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid-item&quot;</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid-item grid-item--width2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid-item&quot;</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid-item grid-item--height2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  ...
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</code></pre>

<pre><code class="css"><span class="class">.grid-item</span> <span class="rules">{
  <span class="rule"><span class="attribute">float</span>:<span class="value"> left</span></span>;
  <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">50px</span></span></span>;
  <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">50px</span></span></span>;
  <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#e6e5e4</span></span></span>;
  <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">2px</span> solid <span class="hexcolor">#b6b5b4</span></span></span>;
}</span>

<span class="class">.grid-item--width2</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">100px</span></span></span>; }</span>
<span class="class">.grid-item--height2</span> <span class="rules">{ <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">100px</span></span></span>; }</span>
</code></pre>
  </div>
  <div class="duo__cell examle__demo">
    <div class="grid js-isotope" data-isotope-options="{ &quot;masonry&quot;: { &quot;columnWidth&quot;: 50 } }">
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2 grid-item--height2"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </div>

      <p class="edit-demo">
          <a href="http://codepen.io/desandro/pen/mEinp">Edit this demo on CodePen</a>
      </p>
  </div>
</div>

<h3 id="responsive-layouts">Responsive layouts</h3>

<p>Item sizes can be set with percentages for responsive layouts. With the <code>masonry</code> layout mode, set percentage-width <code>columnWidth</code> with <a href="options.html#element-sizing">element sizing</a>. Set <code>percentPosition: <span class="literal">true</span></code> so item positions are likewise set with percentages to reduce adjustment transitions on window resize.</p>

<p></p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="html"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid&quot;</span>&gt;</span>
  <span class="comment">&lt;!-- width of .grid-sizer used for columnWidth --&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid-sizer&quot;</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid-item&quot;</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">&quot;grid-item grid-item--width2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  ...
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</code></pre>

<pre><code class="css"><span class="comment">/* fluid 5 columns */</span>
<span class="class">.grid-sizer</span>,
<span class="class">.grid-item</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">20%</span></span></span>; }</span>
<span class="comment">/* 2 columns */</span>
<span class="class">.grid-item--width2</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">40%</span></span></span>; }</span>
</code></pre>

<pre><code class="js">$(<span class="string">&apos;.grid&apos;</span>).isotope({
  <span class="comment">// set itemSelector so .grid-sizer is not used in layout</span>
  itemSelector: <span class="string">&apos;.grid-item&apos;</span>,
  percentPosition: <span class="literal">true</span>,
  masonry: {
    <span class="comment">// use element for option</span>
    columnWidth: <span class="string">&apos;.grid-sizer&apos;</span>
  }
})
</code></pre>
  </div>
  <div class="duo__cell examle__demo">
    <div class="grid grid--fluid-5-col js-isotope" data-isotope-options="{ &quot;masonry&quot;: { &quot;columnWidth&quot;: &quot;.grid-sizer&quot; }, &quot;itemSelector&quot;: &quot;.grid-item&quot;, &quot;percentPosition&quot;: true }">
      <div class="grid-sizer"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2 grid-item--height2"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
    </div>

      <p class="edit-demo">
          <a href="http://codepen.io/desandro/pen/mIkhq">Edit this demo on CodePen</a>
      </p>
  </div>
</div>


<h2 id="imagesloaded">imagesLoaded</h2>

<p>Unloaded images can throw off Isotope layouts and cause item elements to overlap. <a href="http://imagesloaded.desandro.com">imagesLoaded</a> resolves this issue.</p>

<p>Initialize Isotope, then trigger <a href="methods.html#layout"><code>layout</code></a> after each image loads.</p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js"><span class="comment">// init Isotope</span>
<span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">&apos;.grid&apos;</span>).isotope({
  <span class="comment">// options...</span>
});
<span class="comment">// layout Isotope after each image loads</span>
<span class="jquery_var">$grid</span>.imagesLoaded().progress( <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  <span class="jquery_var">$grid</span>.isotope(<span class="string">&apos;layout&apos;</span>);
});
</code></pre>
  </div>
  <div class="duo__cell example__demo">
    <div class="grid grid--images" data-js-module="imagesloaded-progress">
      <div class="grid-sizer"></div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/bwy74ok.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/bAZWoqx.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/PgmEBSB.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/aboaFoB.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/LkmcILl.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/q9zO6tw.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/r8p3Xgq.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/hODreXI.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/UORFJ3w.jpg">
      </div>
    </div>
    
      <p class="edit-demo">
          <a href="http://codepen.io/desandro/pen/NqNBxy">Edit this demo</a>
          or <a href="http://codepen.io/desandro/pen/PqNBzj">vanilla JS demo</a> on CodePen
      </p>
  </div>
</div>

<p>Or, initialize Isotope after all images have been loaded.</p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js"><span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">&apos;.grid&apos;</span>).imagesLoaded( <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  <span class="comment">// init Isotope after all images have loaded</span>
  <span class="jquery_var">$grid</span>.isotope({
    <span class="comment">// options...</span>
  });
});
</code></pre>
  </div>
  <div class="duo__cell example__demo">
    <div class="grid grid--images" data-js-module="imagesloaded-callback">
      <div class="grid-sizer"></div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/bwy74ok.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/bAZWoqx.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/PgmEBSB.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/aboaFoB.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/LkmcILl.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/q9zO6tw.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/r8p3Xgq.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/hODreXI.jpg">
      </div>
      <div class="grid-image-item">
        <img src="http://i.imgur.com/UORFJ3w.jpg">
      </div>
    </div>
    
      <p class="edit-demo">
          <a href="http://codepen.io/desandro/pen/BNKPRJ">Edit this demo</a>
          or <a href="http://codepen.io/desandro/pen/QbNBpB">vanilla JS demo</a> on CodePen
      </p>
  </div>
</div>

    </div>
  </div>

  <div class="site-footer">
  
    <div class="primary-content">
  
      <p class="footer-copy">Follow <a href="https://twitter.com/metafizzyco">@metafizzyco on Twitter for Isotope updates</a></p>
    </div>
  
    <div class="site-footer__brand">
      <a class="site-footer__brand__logo" href="http://metafizzy.co">M<span class="etafizzy">etafizzy</span></a>
      <span class="site-footer__brand__copyright">&#xA9; 2011&#x2013;2015</span>
    </div>
  
  </div>

<!-- Looking for isotope.js? Use isotope.pkgd.min.js -->
<!-- Isotope does NOT require jQuery. But it does make things easier -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/jquery.min.js"><\/script>')</script>

  <script src="js/isotope-docs.min.js"></script>

  <!-- Google Analytics - Remove this if you copy/pasted this page -->
  <script>
    // Google Analytics
    (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
    function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
    e=o.createElement(i);r=o.getElementsByTagName(i)[0];
    e.src='//www.google-analytics.com/analytics.js';
    r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
    ga('create','UA-58739927-3','auto');ga('send','pageview');
  </script>

</body>
</html>
@ Telegram