Responsive Square Grid Layout For jQuery - Square.js

Square.js is a lightweight and simple-to-use jQuery plugin for dynamically render a responsive, cross-platform square grid layout from a group of DOM elements.

How to use it:

1. Include the minified version of the jQuery Square.js plugin after you've included jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.square.min.js"></script>

2. Insert your elements to the square grid layout as these:

<div id="boxOuter">
  <div class="square">
      <div class="inner">
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </div>
  </div>
  <div class="square">
      <div class="inner">
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </div>
  </div>
  <div class="square">
      <div class="inner">
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </div>
  </div>
  <div class="square _2">
      <div class="inner">
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </div>
  </div>
  <div class="square">
      <div class="inner">
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </div>
  </div>
  ...
</div>

3. Initialize the square grid layout by calling the function on the top container.

$("#boxOuter").square();

4. The example JavaScript to handle the resize event.

var square = null;
var now = null;

function resizeHandler() {
    var cur = null;

    var width = $(window).width();

    if(width < 640) {
        cur = 'sp';
    } else {
        cur = 'pc';
    }

    if(now === cur) {
        return;
    }
    now = cur;

    if(square) {
        square.destroy();
        square = null;
    }
    switch(now) {
        case 'pc':
            square = $("#boxOuter").square( { size:200, space:2, } );
            break;
        case 'sp':
            square = $("#boxOuter").square( { size:'50%', space:'2%' } );
            break;
    }
}
$(window).on('resize', resizeHandler);
resizeHandler();

5. Default plugin options.

$("#boxOuter").square({
  target: "square",
  inner: ".inner",
  scaleSplit: "_",
  width: 150,
  height: 150,
  space: 10,
  speed: 700,
  duration: 500,
});

Change log:

2017-11-15

• Change parameter size -> width, height and convert to typescript

---

This awesome jQuery plugin is developed by sushat4692. For more Advanced Usages, please check the demo page or visit the official website.