转载响应式商品展示列表的实现 | TYStudio-专注WEB前端开发.
介绍一个最新的响应式商品展示列表,同时带有一些社会化和商品细节的显示。当点击旋转按钮的时候会显示商品的背面,使用Media queries实现响应式显示商品。当浏览器支持Flexbox的时候使用Flexbox。
很遗憾目前的版本还不支持IE系列浏览器。
HTML标签结构
<div id="cbp-pgcontainer" class="cbp-pgcontainer"> <ul class="cbp-pggrid"> <li> <div class="cbp-pgcontent"><span class="cbp-pgrotate" title="旋转">旋转</span> <div class="cbp-pgitem"> <div class="cbp-pgitem-flip"><img src="images/1_front.png" alt="" /> <img src="images/1_back.png" alt="" /></div> </div> <!-- /cbp-pgitem --> <ul class="cbp-pgoptions"> <li class="cbp-pgoptcompare" title="比较">比较</li> <li class="cbp-pgoptfav" title="喜欢">喜欢</li> <li class="cbp-pgoptsize"><span title="XL号" data-size="XL">XL</span> <div class="cbp-pgopttooltip"><span title="XL号" data-size="XL">XL</span> <span title="L号" data-size="L">L</span> <span title="M号" data-size="M">M</span> <span title="S号" data-size="S">S</span></div></li> <li class="cbp-pgoptcolor"><span title="蓝色" data-color="c1">蓝色</span> <div class="cbp-pgopttooltip"><span title="蓝色" data-color="c1">蓝色</span> <span title="粉色" data-color="c2">粉色</span> <span title="桔色" data-color="c3">桔色</span> <span title="绿色" data-color="c4">绿色</span></div></li> <li class="cbp-pgoptcart" title="加入购物车"></li> </ul> <!-- cbp-pgoptions --> </div> <!-- cbp-pgcontent --> <div class="cbp-pginfo"> <h3>T恤一</h3> <span class="cbp-pgprice">¥29</span> </div></li> <li><!-- ... --></li> <li><!-- ... --></li> </ul> </div>
CSS样式
@font-face { font-family: 'pgicons'; src:url('../fonts/pgicons/pgicons.eot'); src:url('../fonts/pgicons/pgicons.eot?#iefix') format('embedded-opentype'), url('../fonts/pgicons/pgicons.woff') format('woff'), url('../fonts/pgicons/pgicons.ttf') format('truetype'), url('../fonts/pgicons/pgicons.svg#pgicons') format('svg'); font-weight: normal; font-style: normal; } .cbp-pgcontainer { position: relative; width: 100%; padding: 0 30px 100px 30px; } .cbp-pgcontainer ul, .cbp-pgcontainer li { padding: 0; margin: 0; list-style-type: none; } .cbp-pggrid { position: relative; text-align: center; } /* 如果支持flexbox,将使用flexbox来布局列表 */ .flexbox .cbp-pggrid { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; } .cbp-pggrid > li { display: inline-block; vertical-align: top; position: relative; width: 33%; min-width: 340px; max-width: 555px; padding: 20px 2% 50px 2%; text-align: left; float:left; } .flexbox .cbp-pggrid > li { display: block; } .cbp-pgcontent { border: 3px solid #47a3da; position: relative; } .cbp-pgrotate { width: 36px; height: 36px; position: absolute; display: block; color: transparent; font-size: 0; z-index: 100; border-bottom: 3px solid #47a3da; border-left: 3px solid #47a3da; right: 0px; top: 0px; cursor: pointer; text-align: center; } .cbp-pgrotate:before { font-size: 18px; line-height: 32px; color: #47a3da; } .no-touch .cbp-pgrotate:hover, .cbp-pgrotate.cbp-pgrotate-active { background: #47a3da; } .no-touch .cbp-pgrotate:hover:before, .cbp-pgrotate.cbp-pgrotate-active:before { color: #fff; } /* The item with the images will have perspective */ .cbp-pgitem { width: 100%; position: relative; padding: 2em; -webkit-perspective: 1400px; -moz-perspective: 1000px; perspective: 1000px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } /* The flip container */ .cbp-pgitem-flip { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform .4s ease-out; -moz-transition: -moz-transform .4s ease-out; transition: transform .4s ease-out; } /* 如果你想要实现当鼠标hover到图片的时候自动翻转的效果,你可以使用下面的代码: .cbp-pgrotate:hover + .cbp-pgitem .cbp-pgitem-flip */ .cbp-pgitem.cbp-pgitem-showback .cbp-pgitem-flip { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform:rotate(180deg); transform: rotateY(180deg); } .cbp-pgitem-flip img { display: block; margin: 0 auto; max-width: 100%; max-height: 100%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .cbp-pgitem img:first-child { position: relative; } /* 为了显示背面,第二个图片将被旋转 */ .cbp-pgitem img:nth-child(2) { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%) rotateY(-180deg); -moz-transform: translateX(-50%) translateY(-50%) rotateY(-180deg); -ms-transform: translateX(-50%) translateY(-50%) rotateY(-180deg); transform: translateX(-50%) translateY(-50%) rotateY(-180deg); } /* 浏览器不支持3dtransform的时候使用 */ .no-csstransforms3d .cbp-pgitem img:nth-child(2) { position: relative; top: 0; left: 0; display: none; } .no-csstransforms3d .cbp-pgitem.cbp-pgitem-showback img:first-child { display: none; } .no-csstransforms3d .cbp-pgitem.cbp-pgitem-showback img:nth-child(2) { display: block; } /* 商品详细信息样式 */ .cbp-pgoptions { height: 60px; width: 100%; border-top: 3px solid #47a3da; } .cbp-pgoptions > li { width: 20%; height: 100%; float: left; position: relative; display: block; cursor: pointer; color: transparent; font-size: 0; border-left: 3px solid #47a3da; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cbp-pgoptions > li:first-child { border-left: none; } .no-touch .cbp-pgoptions li { color: #47a3da; } .no-touch .cbp-pgoptions li:hover, .cbp-pgoptions li.cbp-pgoption-active { background: #47a3da; } .cbp-pgoptions li:before, .cbp-pgoptions li > span { font-size: 22px; line-height: 60px; text-indent: 0; text-align: center; color: #47a3da; } .no-touch .cbp-pgoptions li:hover:before, .no-touch .cbp-pgoptions li:hover > span, .cbp-pgoptions li.cbp-pgoption-active > span { color: #fff; } .cbp-pgoptions li.cbp-pgoptsize > span { font-size: 22px; } .cbp-pgoptions li > span { display: block; } .cbp-pgoptions li:before { position: absolute; width: 100%; height: 100%; } /* 图标 */ .cbp-pgoptcompare, .cbp-pgoptcart, .cbp-pgoptfav, .cbp-pgrotate { font-family: 'pgicons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .cbp-pgoptcompare:before { content: "\e001"; } .cbp-pgoptfav:before { content: "\e003"; } .cbp-pgoptfav.cbp-pgoptfav-selected:before { content: "\e002"; color: #ee73b8; } .cbp-pgoptfav.cbp-pgoptfav-selected:hover:before { color: #f9c0e0; } .cbp-pgoptcart:before { content: "\e000"; } .cbp-pgrotate:before { content: "\e004"; } /* 提示信息 */ .cbp-pgopttooltip { position: absolute; bottom: 180%; margin-bottom: 0px; background: #fff; padding: 25px; width: 100px; left: 50%; margin-left: -50px; border: 3px solid #47a3da; opacity: 0; z-index: 1000; visibility: hidden; pointer-events: none; -webkit-transition: visibility 0s 0.3s, opacity 0.3s, bottom 0.3s; -moz-transition: visibility 0s 0.3s, opacity 0.3s, bottom 0.3s; transition: visibility 0s 0.3s, opacity 0.3s, bottom 0.3s; } .cbp-pgoptions li:hover .cbp-pgopttooltip, .cbp-pgoptions li.cbp-pgoption-active .cbp-pgopttooltip { visibility: visible; opacity: 1; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; bottom: 100%; pointer-events: auto; } .cbp-pgopttooltip:after, .cbp-pgopttooltip:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .cbp-pgopttooltip:after { border-color: transparent; border-top-color: #fff; border-width: 10px; left: 50%; margin-left: -10px; } .cbp-pgopttooltip:before { border-color: transparent; border-top-color: #47a3da; border-width: 14px; left: 50%; margin-left: -14px; } /* 尺寸提示 */ .cbp-pgoptsize .cbp-pgopttooltip { margin-left: -50px; } .cbp-pgoptsize .cbp-pgopttooltip span { display: block; text-indent: 0; background: url(../images/tshirt.svg) no-repeat center center; background-size: 100%; margin: 0 auto 4px; text-align: center; font-size: 12px; font-weight: 700; color: #65b3e2; } .cbp-pgoptsize .cbp-pgopttooltip span:hover { color: #0968a1; transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform:scale(1.1); -moz-transform: scale(1.1); -ms-transform:scale(1.1); } .cbp-pgoptsize .cbp-pgopttooltip span[data-size="XL"] { width: 44px; height: 44px; line-height: 44px; } .cbp-pgoptsize .cbp-pgopttooltip span[data-size="L"] { width: 40px; height: 40px; line-height: 40px; } .cbp-pgoptsize .cbp-pgopttooltip span[data-size="M"] { width: 34px; height: 34px; line-height: 34px; } .cbp-pgoptsize .cbp-pgopttooltip span[data-size="S"] { width: 30px; height: 30px; line-height: 30px; } /* 颜色提示 */ .cbp-pgoptcolor .cbp-pgopttooltip { padding: 5px; } .cbp-pgoptions li.cbp-pgoptcolor > span, .cbp-pgoptcolor .cbp-pgopttooltip span { display: block; margin: 12px auto 0; text-indent: -900em; } .cbp-pgoptions li.cbp-pgoptcolor > span { width: 36px; height: 36px; border: 3px solid #fff; } .cbp-pgoptcolor .cbp-pgopttooltip span { float: left; margin: 4px; width: 34px; height: 34px; } .no-touch .cbp-pgoptcolor .cbp-pgopttooltip span:hover { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform:scale(1.1); } .cbp-pgoptcolor span[data-color="c1"] { background: #72bbe9; } .cbp-pgoptcolor span[data-color="c2"] { background: #e577aa; } .cbp-pgoptcolor span[data-color="c3"] { background: #e5b178; } .cbp-pgoptcolor span[data-color="c4"] { background: #7abe93; } .cbp-pginfo { padding-top: 10px; } .cbp-pginfo:before, .cbp-pginfo:after { content: " "; display: table; } .cbp-pginfo:after { clear: both; } .cbp-pginfo h3, .cbp-pginfo span { float: left; width: 50%; font-size: 1.8em; padding: 10px 5px; margin: 0; } .cbp-pginfo h3 { font-weight: 300; } .cbp-pginfo span { font-weight: 700; text-align: right; } /* Media Queries */ @media screen and (max-width: 68.125em) { .cbp-pggrid > li { width: 48%; } } @media screen and (max-width: 46.125em) { .cbp-pggrid > li { width: 100%; } }
/** * cbpShop.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2013, Codrops * http://www.codrops.com */ ;( function( window ) { 'use strict'; function cbpShop( el ) { this.el = el; this._init(); } cbpShop.prototype = { _init : function() { var self = this; this.touch = Modernizr.touch; this.products = this.el.querySelectorAll( 'ul.cbp-pggrid > li' ); Array.prototype.slice.call( this.products ).forEach( function( el, i ) { var content = el.querySelector( 'div.cbp-pgcontent' ), item = content.querySelector( 'div.cbp-pgitem' ), rotate = content.querySelector( 'span.cbp-pgrotate' ); if( self.touch ) { rotate.addEventListener( 'touchstart', function() { self._rotateItem( this, item ); } ); var options = content.querySelector( 'ul.cbp-pgoptions' ), size = options.querySelector( 'li.cbp-pgoptsize > span' ), color = options.querySelector( 'li.cbp-pgoptcolor > span' ); size.addEventListener( 'touchstart', function() { self._showItemOptions( this ); } ); color.addEventListener( 'touchstart', function() { self._showItemOptions( this ); } ); } else { rotate.addEventListener( 'click', function() { self._rotateItem( this, item ); } ); } } ); }, _rotateItem : function( trigger, item ) { if( item.getAttribute( 'data-open' ) === 'open' ) { item.setAttribute( 'data-open', '' ); trigger.className = trigger.className.replace(/\b cbp-pgrotate-active\b/,''); item.className = item.className.replace(/\b cbp-pgitem-showback\b/,''); } else { item.setAttribute( 'data-open', 'open' ); trigger.className += ' cbp-pgrotate-active'; item.className += ' cbp-pgitem-showback'; } }, _showItemOptions : function( trigger ) { if( trigger.getAttribute( 'data-open' ) === 'open' ) { trigger.setAttribute( 'data-open', '' ); trigger.parentNode.className = trigger.parentNode.className.replace(/\b cbp-pgoption-active\b/,''); } else { trigger.setAttribute( 'data-open', 'open' ); trigger.parentNode.className += ' cbp-pgoption-active'; } }, /* other functions.. */ } window.cbpShop = cbpShop; } )( window );
英文原文链接:PRODUCT GRID LAYOUT