JSFiddle - React, Tailwind, and code Playground
HTML
<div class="masonry-loading">
<img src="<?php echo get_template_directory_uri(); ?>/library/images/ajax-loader.gif" />
</div>
CSS
.btn {
width: 150px;
height: 40px;
color:#666666;
text-decoration: none;
}
.ask-question-wrapper {
background: none repeat scroll 0 0 #EFF6F8;
border: 1px solid #94ACBE;
border-radius: 9px 9px 9px 9px;
margin-bottom: 40px;
}
.ask-question-wrapper .middle, .top {
padding: 0 20px;
}
.ask-question-wrapper textarea {
color: #3F5A6B;
font: 14px Arial;
height: 170px;
padding: 5px;
width: 100%;
}
JavaScript
$(document).ready(function() {
var $container = $('.masonry-c');
var min_width = 230;
$('.masonry-c').hide();
$container.imagesLoaded(function() {
$('.masonry-c').fadeIn('fast');
$("div.masonry-loading").css({
'display': 'none'
});
$container.masonry({
itemSelector: '.masonry-box',
isAnimated: true,
columnWidth: function (containerWidth) {
var box_width = (((containerWidth) / 3) | 0);
if (box_width < min_width) {
box_width = (((containerWidth) / 2) | 0);
}
$('.masonry-box').width(box_width);
return box_width;
}
});
});
});
// Masonary
$(document).ready(function() {
var $container1 = $('.masonry-four-c');
var min_width = 200;
$('.masonry-four-c').hide();
$container1.imagesLoaded(function() {
$('.masonry-four-c').fadeIn('fast');
$container1.masonry({
itemSelector: '.masonry-four-box',
isAnimated: true,
columnWidth: function (containerWidth) {
var box_width = (((containerWidth) / 4) | 0);
if (box_width < min_width) {
box_width = (((containerWidth) / 3) | 0);
}
if (box_width < min_width) {
box_width = (((containerWidth) / 2) | 0);
}
$('.masonry-four-box').width(box_width);
return box_width;
}
});
});
});
function triggerCallback() {
callback.call($this, $images),
$("div.masonry-loading").css('display', 'none');
}