JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<link rel="stylesheet" href="https://howdoweb.com/themes/blocks-v1/css/style.css">
<script src="https://ujw0l.github.io/js-masonry/js-masonry/js-masonry.js"></script>
  
      
      <div class='div-eg'>
        <h3>Div examples <input class="add-el-count" type="number" max="1000" style="width:50;"> <a class="add-more-el" href="javascript:void(0);"><i>Add Divs</i></a></h3>
  
          <div id="div-container"></div>
    </div>  
   
   
        <!--<div class="img-container d-none">
            <h3> Gallery  <input class="add-el-count" type="number" max="200" style="width:50;"> <a class="add-more-el" href="javascript:void(0);"><i>Add Imgs</i></a></h3>
  
            <div class="image_gallery">
         
              <img class="gal-viewer-mas" title="Hillside village resort" src="https://ujw0l.github.io/js-masonry/public/image/2.jpg" >
              <img class="gal-viewer-mas" title="Hillside village resort" src="https://ujw0l.github.io/js-masonry/public/image/4.jpg" >
              <img class="gal-viewer-mas" title="Hillside village resort" src="https://ujw0l.github.io/js-masonry/public/image/5.jpg">
              <img class="gal-viewer-mas" title="Carkeek park" src="https://ujw0l.github.io/js-masonry/public/image/carkeek.JPG" >
              <img class="gal-viewer-mas" title="Bruno" src="https://ujw0l.github.io/js-masonry/public/image/bruno1.jpg" >
              <img class="gal-viewer-mas" title="Carkeek park" src="https://ujw0l.github.io/js-masonry/public/image/14.jpg" >
             
              <img class="gal-viewer-mas" title="Mystic Mountain" src="https://ujw0l.github.io/js-masonry/public/image/mm.jpg" >
              <img class="gal-viewer-mas" title="Daman" src="https://ujw0l.github.io/js-masonry/public/image/daman2.JPG" >
              <img class="gal-viewer-mas" title="Daman" src="https://ujw0l.github.io/js-masonry/public/image/daman3.jpg" >
              <img class="gal-viewer-mas" title="Daman3"...

SCSS

.gal-viewer-mas {
  width: 200px;
}

JavaScript

const arrayMoveIndex = function(arr, from, to) {
	return arr.splice(to, 0, arr.splice(from, 1)[0]);
};

const forceArray = function (value) {
    if (Array.isArray(value)) return value;
    return [value];
};

const swapOrders = function(els, newOrder=[], actions=[], elBounds=[], parentEl=null, settings={}) {
	
  const {removeEasing, addEasing, swapEasing, duration, afterRemove} = settings;
  
  const currentOrder = els.map(el => el.getAttribute('data-id'));
  
  if (!parentEl) parentEl = els[0].parentElement;
  
  if (!elBounds || elBounds.length !== els.length) {
  	elBounds = Array(els.length).fill({});
    
    //Get current element bounds...
  	for (let i=0, l=newOrder.length; i < l; i++) {
    	
    	let id = newOrder[i];
      const index = currentOrder.indexOf(id);
      if (index === -1) continue;
      
      elBounds[index] = els[index].getBoundingClientRect();
      
    }
    
  }
  
  
  for (let i=0, l=newOrder.length; i < l; i++) {
  	
    const id = newOrder[i];
    let index = currentOrder.indexOf(id);
    let newIndex = i;
    if (!elBounds[index]) continue; //Skip if already in the correct index or ID not found
    const action = actions?.[i];
    
    let el= els[index];
    
    if (action === 'add') {
    	el = parentEl.insertBefore(el, parentEl.children[i]);
    	animateAdd(el, el.getBoundingClientRect(), elBounds[index], duration, addEasing);
      
    } else if (action === 'remove') {
    
      //Move to the end...
      parentEl.append(el);
			animateRemove(el, elBounds[index], duration, removeEasing, afterRemove);
      newIndex = newOrder.length;
      
    } else {
    	
    	if (index !== i) {
   			//Move element to index
        el = parentEl.insertBefore(el, parentEl.children[i]);
      }
      //Animate the movement
    	animateSwap(el, el.getBoundingClientRect(), elBounds[index], duration, swapEasing);
    
    }
    
    
    if (index !== newIndex) {
      //Update currentOrder
      arrayMoveIndex(currentOrder, index,...