jquery-masonry

Reload Masonry Grid after AJAX call

由 痴心易碎 提交于 2021-01-27 14:07:11
问题 I have a Masonry Grid that is working beautifully. It loads perfectly and readjusts. But I am using a plugin that filters results (Search & Filter plugin for Wordpress) and uses AJAX to do that. But after the AJAX call, my masonry grid is no longer working. I know it is due to the fact that I need to reload Masonry after the AJAX call, but I don't exactly know how to do that. Does anyone know how I can do that? Here is my basic HTML structure. <div id="masonry-container> <div id="search

Jquery Isotope plugin: Generating random sized images

由 白昼怎懂夜的黑 提交于 2020-03-28 06:38:29
问题 I am using the Jquery Isotope plugin with divs that have a back ground image and that are a particular size: .frontpageimage { height: 200px; width: 200px; background-image: url('tile1.jpg'); } This works fine. But I want to throw something in there that randomly selects and image and makes it bigger then the others, so I created this: $('#isotopecontainer .isotope-item:nth-child(2)').find('.frontpageimage').addClass('frontpageimagehigh'); .frontpageimagehigh { height: 420px; width: 200px; }

Pinterest style layout (Bootstrap 3 + Masonary) *final tweeks*

由 ▼魔方 西西 提交于 2020-02-01 09:09:22
问题 I'm building a site that needs a pinterest style home page. (but only 3 columns wide collapsing down to 2 and then 1 column using the col-lg-4 bootstrap class). I've searched and found many options of how to do this. However, I don't want to specify column widths in my css (I want it to inherit the bootstrap column widths) I dont want to use the new css3 column layout (for lack of older browser support) I dont want to do it in PHP as it stacks in the incorrect order. I've adapted some code

Pinterest style layout (Bootstrap 3 + Masonary) *final tweeks*

由 一个人想着一个人 提交于 2020-02-01 09:07:22
问题 I'm building a site that needs a pinterest style home page. (but only 3 columns wide collapsing down to 2 and then 1 column using the col-lg-4 bootstrap class). I've searched and found many options of how to do this. However, I don't want to specify column widths in my css (I want it to inherit the bootstrap column widths) I dont want to use the new css3 column layout (for lack of older browser support) I dont want to do it in PHP as it stacks in the incorrect order. I've adapted some code

Pinterest style layout (Bootstrap 3 + Masonary) *final tweeks*

由 帅比萌擦擦* 提交于 2020-02-01 09:07:04
问题 I'm building a site that needs a pinterest style home page. (but only 3 columns wide collapsing down to 2 and then 1 column using the col-lg-4 bootstrap class). I've searched and found many options of how to do this. However, I don't want to specify column widths in my css (I want it to inherit the bootstrap column widths) I dont want to use the new css3 column layout (for lack of older browser support) I dont want to do it in PHP as it stacks in the incorrect order. I've adapted some code

Height of hidden div doesn't expand with Masonry content

由 狂风中的少年 提交于 2020-01-25 07:39:12
问题 I have a script that toggles the visibility of a div, inside of the div is content loaded with the masonry plugin. The issue I'm having is that the masonry div (and as a result the two wrapper divs) doesn't expand in height as the masonry content is loaded - it squishes the masonry items together. here's my code: <html> <head> <title>view?</title> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script> <script type='text/javascript' src=

jquery Masonry, add a new div in the center of the div#container

由 本小妞迷上赌 提交于 2020-01-24 21:08:21
问题 I have some DIV's in my HTML and I want click some div's then add a new div in the center of the div#container. and the page could reload , put the first pieces div's around this new div. however, this is what i need Here is my code, http://jsfiddle.net/PQGGT/ there is still have a window resize function. 回答1: My course of action in the solution was to center the new element by appending it to the right position in the container by calculating where it should be located, iterate through the

Masonry grid the same height

由 眉间皱痕 提交于 2020-01-17 03:52:08
问题 trying to set Masonry script to display images like on this page: http://www.stefanheinrichs.com/projects/ Is it possible? Maybe there is some other library that will be better ? thanks for help in advance 回答1: You can get even height if you don't mind a little cropping... Using background-image and padding 50%. The HTML <div class="masonry-grid"> <div class="masonry-item"> <div class="background-image" style="background-image('http://mywebsite/images/cool-image-1.jpg')"> </div> </div> <div

Isotope grid breaks on browser resize

由 喜夏-厌秋 提交于 2020-01-16 03:17:27
问题 I am trying to create a 3 column grid using Twitter Bootstrap and Isotope. However, when I resize the browser to be narrow enough to force the layout into a single column mode, isotope fails leaving large vertical and horizontal spaces. Normal when not one column Broken when one column As you can see in the above image, there are large vertical spaces and also the first cell doesn't expand to 100% width. Here's my Codepen. HTML: <html lang="en" class=""> <head> <meta charset="utf-8" /> <title

Refresh masonry layout after knockoutJS databound template is inserted into a container

由 [亡魂溺海] 提交于 2020-01-15 06:05:08
问题 I have a knockout template binding used to bind list of divs to an observable array: <div class="menu-instance-entries js-masonry" data-masonry-options='{ "gutter": 20, "itemSelector": ".menu-entry" }' data-bind="template: { name: 'menu-entries-template', foreach: MenuEntries }"></div> MenuEntries is an observable array that gets a new element " push ed" into it by a click handler bound to a view model's function. The layout of the elements in the .menu-instance-entries container is
订阅 jquery-masonry