이미 유행이 살짝 지났는지도 모르겠지만, 사이트를 구경하다보니 핀터레스트와 비슷한 UI를 적용한 사이트들이 눈에 띄어 나도 만들어보고자 도전했다. 검색해보면 남들이 만들어 놓은 쓸만한 제이쿼리 라이브러리들이 있지만, 공부삼아 만드는 것에 의미를 두고자 만들어 보았다. 대략적으로 아래 모습같은 UI형태로 만들고자 하였다.
- 1. 브라우저 넓이에 따라 갤러리에서 보여지는 이미지 갯수가 달라져야한다. (모바일일때는 1개, pc에서는 사이즈가 넓어짐에 따라 2개, 3개, 4개까지 보여진다.)
- 2. 각각의 이미지의 사이즈는 고정적이지 않고 랜덤하게 적용하고 싶고, 텍스트도 다양한 길이로 보여지게 하고 싶다. (가로사이즈는 width:100%를 적용해 동일하지만, 세로사이즈는 원본이미지 사이즈에 따라 비율에 맞게 자동으로 적용된다.)
[제작아이디어]
- 1. 2단 3단 4단일때, 각각 세로로 배치되는 요소들의 index번호를 배열로 만들자.
- 2. 앞에서 만든 배열로 2단 3단 4단일때, 요소들의 높이값을 배열로 만들자.
- 1번의 index번호 배열과 2번의 높이값 배열의 값으로 브라우저사이즈에 따라 요소가 재배치될때, 요소들의 ‘left’, ‘top’ 값을 적용해주자.
[결과물]
브라우저 사이즈에 따라 1단, 2단, 3단, 4단으로 배치되게 만들었고, 세로 사이즈는 랜덤하게 만들었다. 아래 링크에서 결과물을 확인할 수 있다. http://mcatcher3.cafe24.com/html/randomgallery/gallery.html[JS코드]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 | $(window).load(function () { /*** 함수전체에서 gallery, object, count, checkNum, column은 전역변수 및 전역배열로 사용한다. ***/ var gallery = $("#randomGallery"); var object = gallery.find("li"); var count = object.length; //li의 갯수 var checkNum = []; //컬럼별 li의 갯수를 저장할 배열을 만든다. var column = []; //2단, 3단, 4단일때 각각 li요소의 인덱스 번호를 가져오기 위한 배열 column[0] = [];//2단일때 column[0][0] = []; column[0][1] = []; column[1] = [];//3단일때 column[1][0] = []; column[1][1] = []; column[1][2] = [] column[2] = [];//4단일때 column[2][0] = []; column[2][1] = []; column[2][2] = []; column[2][3] = []; (function () { checkNum[0] = 0;//2단, 1번열 li의 갯수 checkNum[1] = 0;//2단, 2번열 li의 갯수 checkNum[2] = 0;//3단, 1번열 li의 갯수 checkNum[3] = 0;//3단, 2번열 li의 갯수 checkNum[4] = 0;//3단, 3번열 li의 갯수 checkNum[5] = 0;//4단, 1번열 li의 갯수 checkNum[6] = 0;//4단, 2번열 li의 갯수 checkNum[7] = 0;//4단, 3번열 li의 갯수 checkNum[8] = 0;//4단, 4번열 li의 갯수 for ( var i = 0 ; ((2 * i) + 1) <= count ; i++ ) { checkNum[0] = checkNum[0] + 1; column[0][0] += (((2 * i) + 1) - 1) + ","; //index번호이기 때문에 1을 빼준다. }//2단일때, 1번째열의 li갯수와 인덱스번호를 계산한다. column[0][0] = column[0][0].slice(0, -1).split(",");//마지막 쉼표를 제거하고 쉼표를 기준으로 배열로 정리 for ( var i = 0 ; ((2 * i) + 2) <= count ; i++ ) { checkNum[1] = checkNum[1] + 1; column[0][1] += (((2 * i) + 2) - 1) + ","; }//2단일때, 2번째열 column[0][1] = column[0][1].slice(0, -1).split(","); for ( var i = 0 ; ((3 * i) + 1) <= count ; i++ ) { checkNum[2] = checkNum[2] + 1; column[1][0] += (((3 * i) + 1) - 1) + ","; }//3단일때, 1번째열 column[1][0] = column[1][0].slice(0, -1).split(","); for ( var i = 0 ; ((3 * i) + 2) <= count ; i++ ) { checkNum[3] = checkNum[3] + 1; column[1][1] += (((3 * i) + 2) - 1) + ","; }//3단일때, 2번째열 column[1][1] = column[1][1].slice(0, -1).split(","); for ( var i = 0 ; ((3 * i) + 3) <= count ; i++ ) { checkNum[4] = checkNum[4] + 1; column[1][2] += (((3 * i) + 3) - 1) + ","; }//3단일때, 3번째열 column[1][2] = column[1][2].slice(0, -1).split(","); for ( var i = 0 ; ((4 * i) + 1) <= count ; i++ ) { checkNum[5] = checkNum[5] + 1; column[2][0] += (((4 * i) + 1) - 1) + ","; }//4단일때, 1번째열 column[2][0] = column[2][0].slice(0, -1).split(","); for ( var i = 0 ; ((4 * i) + 2) <= count ; i++ ) { checkNum[6] = checkNum[6] + 1; column[2][1] += (((4 * i) + 2) - 1) + ","; }//4단일때, 2번째열 column[2][1] = column[2][1].slice(0, -1).split(","); for ( var i = 0 ; ((4 * i) + 3) <= count ; i++ ) { checkNum[7] = checkNum[7] + 1; column[2][2] += (((4 * i) + 3) - 1) + ","; }//4단일때, 3번째열 column[2][2] = column[2][2].slice(0, -1).split(","); for ( var i = 0 ; ((4 * i) + 4) <= count ; i++ ) { checkNum[8] = checkNum[8] + 1; column[2][3] += (((4 * i) + 4) - 1) + ","; }//4단일때, 4번째열 column[2][3] = column[2][3].slice(0, -1).split(","); }) ()//2단, 3단, 4단일때 index번호를 가져올 숫자를 각각 계산해서 배열로 만들고 그 갯수를 계산해오는 함수 function calHeight () { var nameNum = 0; var heightArray = []; for (var i = 0 ; i < column.length ; i++) {//column배열의 갯수만큼 3번 반복한다. for (var j = 0 ; j < column[i].length ; j++) { //column[i]배열의 각각의 갯수만큼 반복한다. var storage = ""; //height값을 저장할 변수 for (var k = 0 ; k < column[i][j].length ; k++) { //column[i][j]배열의 각각의 갯수만큼 반복한다. var index =parseInt(column[i][j][k]); //배열의 값을 변수에 숫자로 저장한다. if (object.eq(index).css("height") != undefined ) { //object요소가 있을때만 실행하기 위한 조건문 storage += object.eq(index).css("height").replace("px" , ","); //height값을 가져와서 변수에 저장 } } storage = storage.slice(0, -1).split(","); //하나의 배열로 저장 heightArray[nameNum] = storage; // heightArray배열에 인덱스번호를 지정하여 각각의 height값배열을 저장한다. nameNum = nameNum + 1; //각각 배열로 저장하기위해, nameNum숫자를 1씩더함 } } return heightArray; //heightArray 값을 반환한다. } //2,3,4단일때 height값을 각각의 배열에 저장하는 함수 function arrangeObject (num) { //left값과, top값, width값을 설정해준다. height값은 width가 정해진다음에 불러와져야한다. var i = num; switch (i) { case 2 : //2단일때 gallery.attr("class", "list"); gallery.addClass("column02"); var sum1 = 0; for (var i = 0 ; i < checkNum[0] ; i++) { //checkNum[]의 갯수만큼 반복 object.eq(column[0][0][i]).css({ "left" : "0", "width" : "50%", "top" : function () { var columnHeight = calHeight(); //변수 columnHeight에 calHeight함수를 참조시켜 값을 가져온다. width값이 정해진후 높이를 불러와야한다. 반환되는값 columnHeight[n] sum1 += parseInt(columnHeight[0][i]); return (sum1 - parseInt(columnHeight[0][i])) + "px"; //for문을 도는 동안 해당열의 height값을 더한후, 현재 li의 height값을 뺀값이 top값이 된다. } }); } var sum2 = 0; for (var i = 0 ; i < checkNum[1] ; i++) { object.eq(column[0][1][i]).css({ "left" : "50%", "width" : "50%", "top" : function () { var columnHeight = calHeight(); sum2 += parseInt(columnHeight[1][i]); return (sum2 - parseInt(columnHeight[1][i])) + "px"; } }); } gallery.css("height", Math.max(sum1, sum2) + "px")//li요소가 absolute속성이기 때문에 상위요소에 높이값이 필요하다. 높이값 총합 중 큰수를 비교해서 gallery에 전체 높이를 정해준다. break; case 3 : //3단일때 gallery.attr("class", "list"); gallery.addClass("column03"); var sum1 = 0; for (var i = 0 ; i < checkNum[2] ; i++) { object.eq(column[1][0][i]).css({ "left" : "0", "width" : "33.33%", "top" : function () { var columnHeight = calHeight(); sum1 += parseInt(columnHeight[2][i]); return (sum1 - parseInt(columnHeight[2][i])) + "px"; } }); } var sum2 = 0; for (var i = 0 ; i < checkNum[3] ; i++) { object.eq(column[1][1][i]).css({ "left" : "33.33%", "width" : "33.33%", "top" : function () { var columnHeight = calHeight(); sum2 += parseInt(columnHeight[3][i]); return (sum2 - parseInt(columnHeight[3][i])) + "px"; } }); } var sum3 = 0; for (var i = 0 ; i < checkNum[4] ; i++) { object.eq(column[1][2][i]).css({ "left" : "66.66%", "width" : "33.33%", "top" : function () { var columnHeight = calHeight(); sum3 += parseInt(columnHeight[4][i]); return (sum3 - parseInt(columnHeight[4][i])) + "px"; } }); } gallery.css("height", Math.max(sum1, sum2, sum3) + "px") break; case 4 : //4단일때 gallery.attr("class", "list"); gallery.addClass("column04"); var sum1 = 0; for (var i = 0 ; i < checkNum[5] ; i++) { object.eq(column[2][0][i]).css({ "left" : "0", "width" : "25%", "top" : function () { var columnHeight = calHeight(); sum1 += parseInt(columnHeight[5][i]); return (sum1 - parseInt(columnHeight[5][i])) + "px"; } }); } var sum2 = 0; for (var i = 0 ; i < checkNum[6] ; i++) { object.eq(column[2][1][i]).css({ "left" : "25%", "width" : "25%", "top" : function () { var columnHeight = calHeight(); sum2 += parseInt(columnHeight[6][i]); return (sum2 - parseInt(columnHeight[6][i])) + "px"; } }); } var sum3 = 0; for (var i = 0 ; i < checkNum[7] ; i++) { object.eq(column[2][2][i]).css({ "left" : "50%", "width" : "25%", "top" : function () { var columnHeight = calHeight(); sum3 += parseInt(columnHeight[7][i]); return (sum3 - parseInt(columnHeight[7][i])) + "px"; } }); } var sum4 = 0; for (var i = 0 ; i < checkNum[8] ; i++) { object.eq(column[2][3][i]).css({ "left" : "75%", "width" : "25%", "top" : function () { var columnHeight = calHeight(); sum4 += parseInt(columnHeight[8][i]); return (sum4 - parseInt(columnHeight[8][i])) + "px"; } }); } gallery.css("height", Math.max(sum1, sum2, sum3, sum4) + "px") break; } } function browserSize () { var browserWidth = $(window).width(); if (browserWidth < 768) { gallery.attr("class", "list"); gallery.addClass("column01"); } else if ((768 < browserWidth) && (browserWidth < 900)) { arrangeObject(2); } else if ((901 < browserWidth) && (browserWidth < 1200)) { arrangeObject(3); } else if (1200 < browserWidth) { arrangeObject(4); } } browserSize(); $(window).resize(function () { browserSize(); });//리사이즈될때, 함수실행 $(".randomgallery_wrap .btn2").click(function () { arrangeObject(2); }); $(".randomgallery_wrap .btn3").click(function () { arrangeObject(3); }); $(".randomgallery_wrap .btn4").click(function () { arrangeObject(4); }); }); |
