javascript - jQuery Masonry—Constrain to a Maximum Width on Window Resize Event? - Stack Overflow

admin管理员组

文章数量:1321608

I am using jQuery Masonry to display a grid of boxes (all the same size).

Here is my testing site.

Works great when the browser width is 1100px or below.

When viewing it at 1270px and above, Masonry keeps adding columns on the right hand side.

I have a max-width set on the outer container, but Masonry doesn't seem to acknowledge it and just keeps expanding the width of the Masonry container.

On the Masonry Centered page, you can see that it is centered, but there is no constraining width. As you increase the browser width, it just keeps expanding and adding more columns.

How can I add a hard rule to say, "This is the maximum width. Stop trying to add more columns."

Thanks

UPDATE Here is a jsfiddle, although I"m not sure if it's even set up correctly. It's best just to go to my testing site to see the problem.

I am using jQuery Masonry to display a grid of boxes (all the same size).

Here is my testing site.

Works great when the browser width is 1100px or below.

When viewing it at 1270px and above, Masonry keeps adding columns on the right hand side.

I have a max-width set on the outer container, but Masonry doesn't seem to acknowledge it and just keeps expanding the width of the Masonry container.

On the Masonry Centered page, you can see that it is centered, but there is no constraining width. As you increase the browser width, it just keeps expanding and adding more columns.

How can I add a hard rule to say, "This is the maximum width. Stop trying to add more columns."

Thanks

UPDATE Here is a jsfiddle, although I"m not sure if it's even set up correctly. It's best just to go to my testing site to see the problem.

• javascript
• jquery
• max
• jquery-masonry
• css

Share Improve this question Follow edited May 13, 2012 at 19:30 davecave asked May 11, 2012 at 3:49 davecavedavecave 4,81866 gold badges2929 silver badges3434 bronze badges 6

• 1 have you tried using the containerStyle option to masonry? – x1a4 Commented May 12, 2012 at 4:32
• I included the containerStyle option, but it doesn't seem to read it for some reason. Right now that should put position: absolute on the project wrapper, but it's not. – davecave Commented May 12, 2012 at 5:54
• Here is the fiddle. Not the best fiddle ever, but it works. If you can get it to not expand beyond 3 columns, you get a cookie. Don't worry about the weird hover states. jsfiddle/26dsg/4/embedded/result – davecave Commented May 12, 2012 at 6:11
• that !important seems to break your layout. Try without it. – user201788 Commented May 17, 2012 at 4:40
• It seems the resize issue it still happening after deleting !important – davecave Commented May 17, 2012 at 20:13

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 7

Setting a max-width on the parent element of the masonry'ed container works for me. Is this not the result you're looking for?

#wrapper { max-width: 990px; }

本文标签： javascriptjQuery MasonryConstrain to a Maximum Width on Window Resize EventStack Overflow