masonry에 대한 견해

이전에 salvattore.js를 써서 완벽한 masonry를 구현할 수 있다고 말했다.

하지만 최근 salvattore.js를 다양하게 써보면서 salvattore.js가 꼭 정답이 아님을 깨닫고 있다.

일반적으로 모든 박스의 가로 길이가 동일할 경우 salvattore.js는 큰 완벽성과 효율성을 보인다.

특히나 박스내에 콘텐츠가 동적으로 추가 된다고 하여도 다른 라이브러리처럼 위치가 깨지지 않을까 걱정하지 않아도 되고,

시덥잖은 애니메이션 기능도 없기에 매우 렌더링 속도가 빠르다.

하지만 salvattore.js도 다양한 가로길이의 박스를 다룰 경우에 매우 취약함을 알았다.

물론 이전에 실험 안해본건 아니지만 결과적으로 css float: left 속성을 적용한 것과 그 결과가 별반 다르지 않다.

즉, 박스간에 빈공간을 채우지 못하고 그냥 남겨둔다는 이야기가 된다.

이럴경우는 다시 다른 라이브러리에 눈길이 가지만 아까 말했듯이 동적으로 콘텐츠가 추가될시에도 계속해서 렌더링을 해줘야 하는 문제가 있을수 있고,

일단 box들이 position: absolute 라는 속성을 가지고 있기에 css 로딩속도에 따라 결과 변동이 있을수 있다.

(물론 webpack 등을 사용해 로딩 순서를 정해주면 괜찮긴하지만 흠.. 여튼)

이쯤에서 나는 선택을 해야했고, 나름 결론을 내렸다.

1. 박스의 가로길이가 동일할 경우 -> salvattore.js를 써주자

2. 박스의 가로길이가 다를 경우 -> css로 코딩한다. bootstrap의 col- 클래스와 float: left 속성을 이용하자

(단, 해당 페이지는 콘텐츠 변동이 있는경우가 아닌 고정레이아웃일때 이렇게 한다는 조건이 있다.)

3. 박스의 길이가 규칙이 있을경우 -> css의 grid 속성을 이용한다. 자세한 사항은 아래의 링크를 참조하자.

https://codepen.io/ingvi/pen/WZZQEr?limit=all&page=18&q=masonry

결론적으로 박스의 가로, 세로 길이의 변동을 모두 감당할 수 있는 깔끔하고 완벽한 masonry 라이브러리는 없는거 같다.

혹시 누군가 발견했고 쓰고 있다면 저에게 연락을 주시면 정말 감사합니다.