블로그 카테고리 썸네일 이미지로 보기(masonry?) 적용과 문제점

그러니깐 티스토리 처음 시작할 당시부터 - 10년은 된 것 같다. ㅋ -  고민했다가 방법을 몰라 포기하고,,
최근에 티스토리 블로그가 이것저것 정책적으로 변경이 된다하여 이것저것 살펴보던중
소위 핀터레스트 방식의 masonry 정렬 방법이 있어 적용해보았다.

이미 소개된 방법과 크게 다르지 않게 느리고 렌더링시 뻑뻑대는 느낌이 적잖다.

아직도 티스토리에서 썸네일 이미지를 가져오는 치환자를 지원하지 않아 범용 기법을 적용하기에는 무리가 있다.

댓글의 URL 링크도 아직까지 지원하지 않는 걸 보면 뭐랄까... 설치형 플랫폼이 면죄부가 되면 안되는데 여튼 의욕이 없어보인다.

각설하고,,
그냥 널리 알려진 방법을 적용해보았으나,,
위 첨부 그림처럼 자동 정렬이 안되는 문제가 있다..

누가 좀 속 시원하게 알려줬으면 좋겠다.

inline, block 과 같은 속석의 문제인건지.... 이휴~

위 예제의 블로그이다.

https://mindeater.tistory.com/category/Photo%20Sketch/flower

Skin.html

ygal.js

CSS

.searchList ul {
    display: inline-block;
    clear: both;
    list-style: none;
    content: ""
}

.searchRplist ul {
    list-style: none;
    padding: 10px;
    margin: 0;
}

/* .searchList li,
.searchRplist li { line-height:100%; padding-bottom:2px; margin-bottom:4px;}
.searchList .date,
.searchRplist .date { font-size:9px; margin-left:10px; }
.searchList .cnt { font-size:9px; color:#7aa;}
.searchRplist .name { font-size:11px; color:#999; padding-left:8px;}
*/
/* *****  for a new thumbnail category, 190113  ***** */
.searchList li {
    position: relative;
    float: left;
    margin: 0 1% 20px;
    border-radius: 5px;
    width: 22%;
}

.searchList .thumb img {
    width: 100%;
    height: auto;
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
    background: #fff;
    display: block
}

.searchList .caption {
    padding: 1px;
    margin-top: 1px;
    font-size: 0.8rem;
}

/* fixed_img_col */
.searchList {
    text-align: center;
}

.fixed_img_col li {
    overflow: hidden;
    display: block;
}