General

Isotope is a jQuery plugin, which works on a container element with a group of similar child items. Can be used for filtering "separated" and "mixed" categories of elements. There is many more advanced settings which you can find on the official site.

Creating content for filtering

Create container with similar child elements. In this case it will be divs. Later inside that divs you can put anything.

Style container and child elements by giving them classes.
In my case container - it is a div with class: itembox and ID: box. Child elements - divs with class: item

Add content to the items, style them like you wish and decide what categories will be for filtering. Create global classes for that categories. You can do this by adding simple div to the page and give it class In this case I created classes:
 - empty,
 - image, 
 - text,
 - text-img

Creating filtering menu

Create menu for filtering content.
In my case it will be buttons inside the div.
Div container for buttons has a class: filtefing-menu and ID: filter. Buttons can be styled as you wish

Adding data attributes for make filters work

To every filtering button add custom data attribute

To every filtering button add custom data attribute data-filter which will be equal class of the elements, which this button will show:

data-filter="*" for Show all
data-filter=".empty" for Empty item
data-filter=".image" for IMG
data-filter=".text" for Text
data-filter=".text-img" for IMG+Text


With this settings you will be able to filter "separated" categories of elements: only one category for every button.
Filtering "mixed" categories at the end of setup section.

Connecting plugin

For connect this plugin you will have to add custom code to the site settings (pic1) or page settings (pic2) before </body> tag.

First you will need a link to .js file of plugin.
You can download that file from the official site and save it to your hosting (or dropbox, or google-drive) or get public link to plugin file.

<script src="your link" type="text/javascript"></script> 

In my case I used public link
https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.js

After this line of code you have to add a code, which will call jQuery plugin.

Don't forget to change .itembox, .item, .filter-menu if your will use another class names.

Also, instead of class name, for container you can use its ID (#box). Pretty useful if your site has several containers with same class.

Filtering "mixed" categories of element.

To one item (element, that will be filtering) you can add few classes. It will let you create "mixed" filtering.

Create GENERAL CLASSES for that "mixed" categories. In this case I created classes:

 - .img-and-text (for items with images and items with text), 
 - .empty-and-text (for empty items and items with text), 
-.empty-and-image (for empty items and items with images).

Then add more buttons to the .filtering-menu

and add custom data attribute data-filter to every button:

data-filter=".img-and-text">IMG and Text
data-filter=".empty-and-text">Empty and Text
data-filter=".empty-and-img">Empty and IMG

Publish you site and enjoy plugin!
Good luck!