jQuery, Makingry stacking?

Question

내가있어 내 사이트에 약간의 도움 후 : 내가 jQuery를 벽돌 단단히 개체를 적재하는 인상을 http://www.lovejungle.com/dev/testenvironment/?cat=5

했다 - 어떤 이유로 내가 그들 사이의 DIV 상자의 내가 할 큰 열린 공간을 무작위 때?

왜 이런 일이 일어나는 지 알 수 있습니까?

는 기본적으로 나는이 일에 유사한 사이트를 만들 찾고 있어요 : http://www.jwt.com/

당신이 어떤 코드 또는 자세한 정보가 필요하면 알려 주시면 신속하게 응답 할 것이다!

건배! jQuery Masonry 웹 사이트에서 인용 마이클

Answer 1

: CSS 수레의 플립 사이드로의

생각합니다. 플로팅은 요소를 수평으로, 그 다음 수직으로 정렬하는 반면, 벽돌은 요소를 수직으로 으로 정렬하고 그리드에 따라 수평으로 정렬합니다.

그래서, 기본적으로, 당신의 요소는 모든 요소의 폭이 동일하게 유지하는 경우에만 잘 맞는 것입니다. 모든 요소의 높이가 같은 경우 float가 멋지게 잘리는 것과 마찬가지입니다. 언급 한 사이트에서이 효과를 관찰 할 수 있습니다 : http://www.jwt.com/ 모든 스택 요소의 너비가 같습니다. :)

HTH.

는

---

편집 :이 또한 요소가 격자의 다른 요소의 배수 폭을 가질 수 있다는 것을 의미한다. 평범한 요소 너비의 3 배인 큰 요소를 가질 수 있습니다.

Answer 2

나는 Masonary가 내부적으로 어떻게 작동하는지 완전히 익숙하지 않다 '라고해야하지만,이 문제에 도움이 될 수 있습니다 나는 당신의 사이트에서 발견 한 두 가지가 있습니다 :

1. 것을 나는 발견은 열은 col2 - col4로 번호가 매겨집니다. 자바 스크립트에서 columnWidth 속성을 200px로 지정하면 각 열의 너비가 200의 배수가됩니다. 원본에서 col1이 200, col2가 400 등으로 가정하면 확실하지 않습니다. . 아마도 col2 대신 col1에서 시작하도록 열의 번호를 매기십시오.

2. 너비가 정확히 200 픽셀이나 정확한 배수가 아닌 것으로 나타났습니다. 여백 + 패딩 + 너비가 200이어야합니다.상자에

   폭 = 170px 패딩 = 10px 당신이 당신의 js에 여백을 추가

Col2의 : 당신의 CSS에서 다음의 예에서 볼 수 있듯이 그렇지 않은 것 같다 = 10px

이 당신에게 제공

170 + 10 + 10 + 10 + 10 = 210px

동일은 마찬가지입니다 다른 열들도.

위의 두 가지를 수정하면 발생한 문제가 해결 될 것이라고 말하지는 않지만 시도해 볼 가치가 있습니다.