Hey Thanks for sharing awesome snippets, i have used this is in my website https://kalarikendramdelhi.com/, please check its awesome looking

Hey, anyone has experienced contents overlapping on load? If so, how did you fix this?

How to change full width in mobile responsive?

Thank youuu!!, works fine for me. I just need to add read more button. Can somebody please tell how do I go about it??

I have tried adding dynamic article to the list . load more images in that time overlap the section . anybody can help for me

Definitely like ... nice work :)

Hello, I an a novice compared to other designers but I am trying to learn. I really like this script and have downloaded it. I used the template to create my own working layout but when I try to implement it into my design it stalls. I believe that there might be a conflict with the version of bootstrap that I am using or that I have a javascript conflict. I have commented out all other javascript files to see if that will remedy the problem with no success. Which leaves me to believe that it has to do with the core bootstrap.css version that I am working with. I am using a free template to learn on and it uses bootstrap v2.1.1 and this script uses v3.1.1. Am I on the right path in trying to troubleshoot my problem?

I did figure out what my problem was. It was a javascript conflict. This script does work in BS2 but as previously mentioned, the columns overlap in my container. Now I just need to figure out how to resize the columns to fit my space. I believe this is a javascript issue in the pinterest_grid.js file. I'm not sure I can fix it with css. Any suggestions?

Why did you fix this problem so slowly.?

I have tried adding dynamic article to the list - seems does't work properly - overlaps the section ! Anyone tried dynamically adding article to the section ?

Hi Guys,
I want to break the grid on i-pad in two columns and on i-phone in one column. Does anyone have an idea how it is possible?

Add:
double_column_breakpoint: 640,

//Make two cols
Plugin.prototype.calculate_two_cols = function (double_column_mode) {
var self = this,
tallest = 0,
row = 0,
$container = $(this.element),
container_width = $container.width();
$article = $(this.element).children();

if(double_column_mode === true) {
article_width = $container.width() - self.options.padding_x;
} else {
article_width = ($container.width() - self.options.padding_x * self.options.double_columns) / self.options.double_columns;
}

$article.each(function() {
$(this).css('width', article_width);
});

columns = self.options.double_columns;

$article.each(function(index) {
var current_column,
left_out = 0,
top = 0,
$this = $(this),
prevAll = $this.prevAll(),
tallest = 0;

if(double_column_mode === false) {
current_column = (index % columns);
} else {
current_column = 0;
}

for(var t = 0; t < columns; t++) {
$this.removeClass('c'+t);
}

if(index % columns === 0) {
row++;
}

$this.addClass('c' + current_column);
$this.addClass('r' + row);

prevAll.each(function(index) {
if($(this).hasClass('c' + current_column)) {
top += $(this).outerHeight() + self.options.padding_y;
}
});

if(double_column_mode === true) {
left_out = 0;
} else {
left_out = (index % columns) * (article_width + self.options.padding_x);
}

$this.css({
'left': left_out,
'top' : top
});
});

this.tallest($container);
$(window).resize();
};

//Replace make_layout_change function

Plugin.prototype.make_layout_change = function (_self) {

if($(window).width() > _self.options.single_column_breakpoint && $(window).width() < _self.options.double_column_breakpoint) {
_self.calculate_two_cols(false);
} else if($(window).width() > _self.options.single_column_breakpoint) {

_self.calculate(false);
} else {
_self.calculate_two_cols(true);
}

};

This solution doesn't work for me. Grid goes crazy at the .double_column_breakpoint...
Some one tried?

hello, really nice! It was working until i have it on wordpress..
it does note make the grid.. any special call? tks.

Thank you!!!!!! what a nice grid!!

What if I want the panels to resize according to the width of the image?

thanks a lot, but how to make it 3 columns?

If i resize browser down to min, the margin/padding is off. Left has 0 and right looks like about 15px.

Hi guys, I really liked this plugin and I think that I fixed it. The problem was in the "for" loop. On line 108 just changed $this.removeClass('c'+t); to $this.removeClass('c'); . It works fine for me with no errors.

Why did you fix this problem so slowly?

thank you very much, it worked!

thanks gopchi! worked for me

Ä° want to add 2 of these in my page but it doesnt fit properly

I've spotted that the class of the section is blinking always. I can see styles are added all the time. What is this for?

Try to do this -> On line 108 just change $this.removeClass('c'+t); to $this.removeClass('c'); . It works fine for me with no errors.

Same problem and $this.removeClass('c'); dont work with AJAX.
https://i.gyazo.com/3b1685b...

True, maybe @mrmccormack would be able to take a look and fix the CPU overload :)

Be careful! This plugin is too much load cpu.

Could you elaborate on how one could reduce the load? Really great work.

get rid of hover and shadows effects the boxes those are the biggest CPU and GPU hogs, performance has increased 45%

Any ideas why this is not laying out correctly in Bootstrap 2.3.2? It seems that the image widths are not calculating properly. I realize that you did this for BS 3, but I have had great success working with V3 code in V2 with a little tweeking.