Jquery Isotope Masonry Layout在Bootstrap 3中留下了元素之间的差距 [英] Jquery Isotope Masonry Layout leaves gap between elements in Bootstrap 3

问题描述

我是新的Web开发，特别是Jquery和Bootstrap。
我试图包括Jquery Isotope在我的尚未被推出的梦想网站的页面之一实现Pinterest的布局，但我在这里遇到了很少的问题。由于我的HTML代码太长，我很匆忙，我已经这些 .gif图像解释问题比我的解释更好：

I am new to web development, especially Jquery and Bootstrap. I am trying to include Jquery Isotope to achieve a Pinterest like layout in one of the pages of my yet to be launched dream website, but I have run into few problems here. Since my html code is too long and I am in kind of in a hurry, I have made these .gif images that explain the problem better than my explanation below:

1. html元素我想应用同位素进入一个循环，以正确加载到只有几个迭代。之后，我可以看到元素之间的很多差距。如果我试图调整浏览器窗口的大小，他们重新排列自己，一切都很好再次[请参阅图像1得到一个清晰的图片]。 注意：此问题似乎仅存在于具有图片的div中。


2. 如果我删除任何元素，我想要重新排列元素，这似乎不起作用。


3. 此外，元素具有可变高度，并且可以在几个条件下扩展。我想要元素重新排列自己，即使在这种情况下。 [请参阅图片2以获得清晰的图片]。

1. The html elements I want to apply Isotope to come in a loop and seem to load properly upto only a few iterations. After that I can see a lot of gaps between the elements. If I try to resize the browser window, they rearrange themselves and everything is fine again [Please see image 1 to get a clear picture]. Note: This problem seems to exist only with the divs having Images. The text only elements are perfectly arranged.
2. I want to the elements to re-arrange themselves if I remove any of them, which doesn't seem to work.
3. Also, the elements are of variable heights and can be expanded in few conditions. I want the elements to rearrange themselves even in this case. [Please see image 2 to get a clear picture].

JS b

if ($('#container').length) {
        $('#container').isotope({
            itemSelector: '.container-item',
            layoutMode: 'masonry'
        });
    }

请帮助我解决这些问题。提前感谢。

Please help me solve these problems. Thanks in advance.

推荐答案

你想达到什么目的，我已经了解了。请看看这里

What you are trying to achieve and what i have understood.Please have a look here

http：// cssdeck。 com / labs / css-only-pinterest-style-columns-layout

这篇关于Jquery Isotope Masonry Layout在Bootstrap 3中留下了元素之间的差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！