2014-01-22 5 views
0

나는 작업하고있는 웹 사이트에서 블로그 게시물의 벽돌 레이아웃을 만들기 위해 jquery-isotope을 사용하고 있습니다. 레이아웃은 두 개의 열이며 긴 양식 작성과 이미지 전용 게시물의 두 가지 게시물 유형이 있습니다.가장 효율적인 레이아웃을위한 벽돌 항목 주문

벽돌이 멋지게 작동하지만, 요소를 정렬하는 데 필요한 몇 가지 문제가 있습니다. 이미지 전용 게시물은 긴 양식 쓰기보다 높이가 상당히 짧습니다. Isotope는 요소 목록을 통해 이동하고 각 항목에 대해 가장 이상적인 위치를 선택합니다.의 위치에 따라 이 선택됩니다.

긴 양식 게시물 앞에 두 개의 짧은 이미지 전용 게시물이 출력되면 레이아웃이 한 열에 실제로 길어지고 다른 열에는 실제로 짧아 질 수 있다는 점이 문제입니다.

bad masonry layout

I 데이터 (날짜, 저자, 카테고리 등)의 조각으로 블로그 게시물을 주문에 대해별로 관리를 수행합니다 I는 다음과 같이 레이아웃을보고 있어요. 레이아웃이 멋지다고 나는 정말로 신경 씁니다. Isotope가 가장 효율적/응축 된 레이아웃을 기반으로 요소를 배치하면 좋을 것입니다. 공백이 적을수록 좋습니다. 또는 다른 벽돌 라이브러리 - -이 작업을 수행하는

good masonry layout

사람이 동위 원소를 얻을 수있는 방법을 알고 있나요

가 : 완벽한 세계에서, 레이아웃은 어땠을까요?

답변

1

나는 당신이 extend Isotopecustom layout mode 자신을 제공 할 수 있습니다 밖으로의 상자 이것으로 도움이 될 수 있지만이 기능을 직접 추가 할 수 있습니다 ..

아무것도 잘 모르는 것 같아요. 확장 지점은 매우 간단하며 masonry logic의 대부분을 다시 사용할 수 있습니다.

기본 석조 논리가 욕심 많은 알고리즘을 사용한다는 것이 문제입니다. 먼저 높이로 항목을 정렬하고 현재 가장 짧은 행에 다음으로 가장 높은 요소를 할당하여 더 효과적으로 수행 할 수 있습니다. 이것은 Partitioning Problem의 최적화입니다. 행에 항목이 할당되면 행 내에서 날짜순으로 정렬 할 수 있습니다.

벽돌 논리가 O(n) 인 경우, 이는 O(n*log(n))이됩니다. 하지만 요소 수가 적기 때문에 복잡성에 대해 걱정하지 않아도됩니다.

+0

코드 없음 : 구현 방법은 독자의 연습 문제로 남았습니다. :) –

관련 문제