Responsive grid with filter, sort and layout

Developer
Parth Viroja
Size
2,993 Kb
Views
26,312
  1. Responsive grid with filter, sort and layout Previews
  2. Responsive grid with filter, sort and layout HTML Codes
  3. Responsive grid with filter, sort and layout CSS Codes
  4. Responsive grid with filter, sort and layout JS Codes

How do I make an responsive grid with filter, sort and layout?

What is a responsive grid with filter, sort and layout? How do you make a responsive grid with filter, sort and layout? This script and codes were developed by Parth Viroja on 03 September 2022, Saturday.

Responsive grid with filter, sort and layout Previews
IQ Test

Responsive grid with filter, sort and layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>responsive grid with filter, sort and layout</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> .controls | Category : button.filter(data-filter='all') all button.filter(data-filter='.music') music button.filter(data-filter='.home') home button.filter(data-filter='.spy') spy br | Favourite : button.sort(data-sort='like:asc') asc button.sort(data-sort='like:desc') desc br | Layout : button.layout list - var i = 0 section.grid - for (var i = 1; i < 100; i++) { if 0 == i % 4 article.item.mix.music(data-like="#{i*8}") div Like : #{i*8} else if 0 == i % 2 article.item.mix.spy(data-like="#{i*4}") div Like : #{i*4} else article.item.mix.home(data-like="#{i*2}") div Like : #{i*2} - } <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.2'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive grid with filter, sort and layout - Script Codes CSS Codes

*{ padding:0px; margin:0px; outline:none; font:14px "Calibri"; font-weight:lighter; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body{ background:#e13300; overflow:hidden; overflow-y:auto; padding-top:120px;
}
.controls{ position:fixed; top:0; left:0; right:0; background:#fff; z-index:1; padding:6px 10px; box-shadow:0px 0px 10px rgba(0,0,0,0.5);
}
button{ border:0px; color:#e13300; margin:4px; padding:4px 12px; cursor:pointer; background:transparent;
}
button.active,button.active:hover{ background:#e13300; color:#fff;
}
button:hover{ background:#efefef;
}
.grid{ padding:4px; color:#fff;
}
.grid:after{ content: ''; display: inline-block; width: 100%;
}
.item{ display:inline-block; float:left; padding:10px; width:33.3333%; display:none;
}
.item > div{ background:rgba(0,0,0,.1); padding:10px; color:#fff; font-size:1.2em; font-weight:lighter; border:1px dashed rgba(0,0,0,.4); background-size:100% 100%; height:300px;
}
.item img{ display:block; margin:0 auto; width:auto; max-width:100%; vertical-align:middle;
}
.category-2 > div{ background:rgba(0,0,0,0.2);
}
.list .item{ width:100% !important;
}

Responsive grid with filter, sort and layout - Script Codes JS Codes

$(function(){ var layout = 'grid', $container = $('.grid'), $changeLayout = $('.layout'); $container.mixItUp({ animation: { //animateChangeLayout: true, // animateResizeTargets: true, effects: 'fade' }, layout: { live:true, containerClass:'' } }); $changeLayout.on('click', function(){ if(layout == 'list'){ layout = 'grid'; $changeLayout.text('list'); $container.mixItUp('changeLayout', { containerClass: layout }); } else { layout = 'list'; $changeLayout.text('grid'); $container.mixItUp('changeLayout', { containerClass: layout }); } });
});
Responsive grid with filter, sort and layout - Script Codes
Responsive grid with filter, sort and layout - Script Codes
Home Page Home
Developer Parth Viroja
Username parthviroja
Uploaded September 03, 2022
Rating 3
Size 2,993 Kb
Views 26,312
Do you need developer help for Responsive grid with filter, sort and layout?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Parth Viroja (parthviroja) Script Codes
Name
Responsive Card Design
Tag list
3D-box
Page load animation
Ubuntu Terminal
Ripple Effect
Custom checkbox and radio with menu
Dynamic Radial Menu Using Javascript
Card border collspan
Contextmenu using Jquery
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!