JSFiddle - React, Tailwind, and code Playground

by Mustafa Oeztuerk

HTML

<div class="exWT">
   <div class="expContainer">
      <div class="expItemWrap" id="1">
         <div class="expIn">
           <div class="exPimg" style="height:400px;">1</div>
         </div>
      </div>
      
      <div class="expItemWrap" id="2">
         <div class="expIn">
            <div class="exPimg" style="height:350px;">2</div>
         </div>
      </div>
      
      <div class="expItemWrap" id="3">
         <div class="expIn">
           <div class="exPimg" style="height:300px;">3</div>
         </div>
      </div>
      
      <div class="expItemWrap" id="4">
         <div class="expIn">
            <div class="exPimg" style="height:200px;">4</div>
         </div>
      </div>
      
      <div class="expItemWrap" id="5">
         <div class="expIn">
           <div class="exPimg" style="height:100px;">5</div>
         </div>
      </div>
      
      <div class="expItemWrap" id="6">
         <div class="expIn">
           <div class="exPimg" style="height:250px;">6</div>
         </div>
      </div>
      
      <div class="expItemWrap" id="7">
         <div class="expIn">
           <div class="exPimg" style="height:200px;">7</div>
         </div>
      </div>
      
      <div class="expItemWrap" id="8">
         <div class="expIn">
           <div class="exPimg" style="height:500px;">8</div>
         </div>
      </div>
      
      <div class="expItemWrap" id="9">
         <div class="expIn">
           <div class="exPimg" style="height:450px;">9</div>
         </div>
      </div>
      
      <div class="expItemWrap" id="10">
         <div class="expIn">
           <div class="exPimg" style="height:300px;">10</div>
         </div>
      </div>
   </div>
   <div class="button">
Lore more
</div>
</div>

CSS

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #f1f4f9;
  word-wrap: break-word;
  margin: 0;
  padding: 0;
  font-family: helvetica, arial, sans-serif;
}
@charset "UTF-8";
/* CSS Document */
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #f1f4f9;
  word-wrap: break-word;
  margin: 0;
  padding: 0;
  font-family: helvetica, arial, sans-serif;
}
.logoutHeader {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    background-color: #469FE2;
    min-width: 0;
    padding-bottom: 8px;
    padding-top: 7px;
    position: fixed;
    overflow: hidden;
    -moz-box-shadow: 0 1px 8px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 1px 8px rgba(0,0,0,.3);
    box-shadow: 0 1px 8px rgba(0,0,0,.3);
    z-index: 999999;
}
.button {
	position:relative;
	float:left;
	width:100%;
	padding:10px;
	color:#4444;
	text-align:center;
	background-color:#d8dbdf;
	box-sizing:border-box;
	cursor:pointer;
}
.logoutHeaderIn {
    width: 100%;
    max-width: 1050px;
    margin: 0px auto;
}

.headWL {
    float: left;
    width: 41px;
    height: 41px;
    padding-right: 10px;
}
.headWL img {
    width: 100%;
}
.headSR {
    float: left;
    max-width: 500px;
    width: calc(100% - 51px);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 5px 0px 5px 0px;
}
.searchT {
    float: left;
    position: relative;
    width: 100%;
    max-width: 500px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    outline: none;
    resize: none;
    border: none;
    background: rgba(255, 255, 255, 1);
    padding: 3px;
    height: 31px;
    color: #ffffff;
    font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    font-weight: 500;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
   ...

JavaScript

(function($){
  $.fn.jaliswall = function(options){

    this.each(function(){

      var defaults = {
        item : '.expItemWrap',
        columnClass : '.wall-column',
        resize:false
      }

      var prm = $.extend(defaults, options);

      var container = $(this);
      var items = container.find(prm.item);
      var elemsDatas = [];
      var columns = [];
      var nbCols = getNbCols();

      init();

      function init(){
        nbCols = getNbCols();
        recordAndRemove();
        print();
        if(prm.resize){
          $(window).resize(function(){
            if(nbCols != getNbCols()){
              nbCols = getNbCols();
              setColPos();
              print();
            }
          });
        }
      }

      function getNbCols(){
        var instanceForCompute = false;
        if(container.find(prm.columnClass).length == 0){
          instanceForCompute = true;
          container.append("<div class='"+parseSelector(prm.columnClass)+"'></div>");
        }
        var colWidth = container.find(prm.columnClass).outerWidth(true);
        var wallWidth = container.innerWidth();
        if(instanceForCompute)container.find(prm.columnClass).remove();
        return Math.round(wallWidth / colWidth);
      }

      // save items content and params and removes originals items
      function recordAndRemove(){
        items.each(function(index){
          var item = $(this);
          elemsDatas.push({
            content : item.html(),
            class : item.attr('class'),
            href : item.attr('href'),
            id : item.attr('id'),
            colid : index%nbCols
          });
          item.remove();
        });
      }

      //determines in which column an item should be
      function setColPos(){
        for (var i in elemsDatas){
          elemsDatas[i].colid = i%nbCols;
        }
      }

      // to get a class name without the selector
      function parseSelector(selector){
        return selector.slice(1,...