PC infiniteGrid test

by hohoya33

HTML

<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<meta name="format-detection" content="telephone=no" />
<title>신상품</title>
<link rel="stylesheet" href="/ssgui/01.ssg/mobile/trunk/css/m_com.css" />
<link rel="stylesheet" href="/ssgui/01.ssg/mobile/trunk/dist/css/mall_with_m_com.css" />
<link rel="stylesheet" href="/ssgui/01.ssg/mobile/trunk/dist/css/cttunit.css" />
<link rel="stylesheet" href="../css/mnmorning.css">
<script src="/ssgui/01.ssg/mobile/trunk/js/lib/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/ssgui/01.ssg/mobile/trunk/css/m_com_newproduct.css">
</head>
<body class="body_mnmorning">
	<a href="#m_container" class="skip_navi">본문 바로가기</a>
	
	<!-- wrap -->
	<div id="m_wrap" class="reveal-left-wrap reveal-right-wrap mcom_wrap mnmorning">
	<!-- header -->
	<header id="header" class="reveal-left-header reveal-right-header">
		<div id="m_gnb" class="mcom_gnbwrap">
			<div class="mcom_gnb2 mcom_gnb2_v2">
				<!-- 몰이동 목록 펼쳤을 때 .cm_logo, .sr_toggle 에 on 클래스 추가 -->
				<div class="cm_logo v2">
					<!-- 각몰 메인일때만 애니메이션 적용 cm_logo_main 클래스 추가 -->
					<div class="cm_logo_home cm_logo_main">
						<h1>
							<a href="#" class="cm_logo_homebtn">
								<span class="cm_logo_homelogo mnmorning"><span class="blind">새벽배송</span></span>
							</a>
						</h1>
						<button type="button" class="cm_logo_toggle sr_toggle">
							<span class="cm_logo_toggle_ico">
								<span class="sr_off"><span class="blind">몰이동 목록 펼치기</span></span>
								<span class="sr_on"><span class="blind">몰이동 목록 접기</span></span>
							</span>
						</button>
					</div>
					<div class="cm_logo_dim"></div>
					<div class="cm_logo_malllist">
						<ul>
							<li>
								<!-- 첫번째 로고 (현재몰) 클래스명은 '.cm_logo_homelogo' + '몰클래스' / 나머지 로고 클래스명은 '.cm_logo_malllogo' + '몰클래스' -->
								<a href="#"...

CSS

@charset "UTF-8";
/* 장바구니담기형 상품유닛 */
.quickunit_grid_list { margin: 0 20px 0 10px; font-size: 0; }

.quickunit_grid_list .quickunit_grid_item { display: inline-block; width: 33.3%; padding-left: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; vertical-align: top; }

.quickunit_item { text-align: left; word-break: break-all; }

.quickunit_item .quickunit_check_top { margin-bottom: 4px; }

.quickunit_item .quickunit_chk { display: block; position: relative; width: 16px; height: 16px; border: 1px solid #969696; background: #fff; }

.quickunit_item .quickunit_chk_inp { width: 18px; height: 18px; margin: -1px 0 0 -1px; -webkit-appearance: none; border: 0 none; border-radius: 0; background: transparent; vertical-align: top; }

.quickunit_item .quickunit_chk_inp:checked + .quickunit_chk_ico { width: 22px; height: 22px; border-radius: 11px; background: rgba(255, 0, 174, 0.7); }

.quickunit_item .quickunit_chk_inp:checked + .quickunit_chk_ico1 { top: -6px; left: 1px; }

.quickunit_item .quickunit_chk_inp:checked + .quickunit_chk_ico2 { top: -2px; left: 1px; }

.quickunit_item .quickunit_chk_inp:checked + .quickunit_chk_ico3 { top: -5px; left: -7px; }

.quickunit_item .quickunit_chk_ico { position: absolute; top: 0; right: 0; width: 1px; height: 1px; }

.quickunit_item .quickunit_link { display: block; }

.quickunit_item .quickunit_thmb_img img { width: 100%; vertical-align: top; }

.quickunit_item .quickunit_tx_thmb { margin-top: 12px; }

.quickunit_item .quickunit_goods_tit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 30px; padding-left: 1px; font-size: 12px; line-height: 15px; letter-spacing: -0.7px; }

.quickunit_item .pricewrap { margin-top: 4px; padding-left: 1px; }

.quickunit_item .new_price { font-family: AppleSDGothicNeo, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: -0.5px; }

.quickunit_item .new_price .ssg_price { font-weight: inherit;...

JavaScript

/*
Copyright (c) 2017 NAVER Corp.
@egjs/persist project is licensed under the MIT license
@egjs/persist JavaScript library
@version 2.2.1
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t.eg=t.eg||{},t.eg.Persist=e())}(this,function(){"use strict";var r="undefined"!=typeof window&&window||{},a=r.console,o=(r.document,r.history),t=r.localStorage,i=r.location,e=r.sessionStorage,n=r.navigator,s=r.parseFloat,f=r.performance,c="___persist___",u="state"+c,l="depths",p="lastUrl",g=f&&f.navigation,v=g&&g.TYPE_NAVIGATE||0,d=(g&&g.TYPE_RELOAD,g&&g.TYPE_BACK_FORWARD||2),h=o&&"replaceState"in o&&"state"in o;function y(t){if(t){var e="__tmp__"+c;try{return t.setItem(e,c),t.getItem(e)===c}catch(t){return!1}}}var w,m=(y(e)?w=e:y(t)&&(w=t),w);function E(){console.warn("window.history or session/localStorage has no valid format data to be handled in persist.")}function _(){return m}function x(t){var e,n;if(m?n=m.getItem(t):o.state?"object"==typeof o.state&&null!==o.state?n=o.state[t]:E():n=o.state,null===n)return{};var r="string"==typeof n&&0<n.length&&"null"!==n;try{var i=!("object"!=typeof(e=JSON.parse(n))||e instanceof Array);if(!r||!i)throw new Error}catch(t){E(),e={}}return e}function S(t,e){if(h||m){var n=x(t)[e];return"null"!==n&&void 0!==n||(n=null),n}}function A(t,e){if(m)e?m.setItem(t,JSON.stringify(e)):m.removeItem(t);else try{var n=o&&null!=o.state?o.state:{};o&&"object"==typeof n?(n[t]=JSON.stringify(e),o.replaceState(n,document.title,i.href)):console.warn("To use a history object, it must be an object that is not a primitive type.")}catch(t){console.warn(t.message)}e?r[c]=!0:delete r[c]}function R(t,e,n){if(h||m){var r=x(t);r[e]=n,A(t,r)}}function N(t){A(t,null)}var O,b,I,j,P,k=n?n.userAgent:"",T=(O=new RegExp("iPhone|iPad","i").test(k),b=new RegExp("Mac","i").test(k)&&!new RegExp("Chrome","i").test(k)&&new RegExp("Apple","i").test(k),I=new RegExp("Android ","i").test(k),j=new...