jquery图片列表按顺序分类排列图片组效果代码



176 703 235



特效描述:图片列表 按顺序分类 排列图片组效果,jquery图片列表按顺序分类排列图片组效果很酷

代码结构

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/script.js"></script>

3. HTML代码

<!-- main start -->
<div id="yhc_responsive" class="main">
    <div class="allProduct respl-header">
        <ul class="productTab respl-option" data-option-key="filter">
            <li class="select"><a href="#" data-rl_value="*">全部</a></li>
            <li><a href="#" data-rl_value=".category-10">热卖</a></li>
            <li><a href="#" data-rl_value=".category-20">新品</a></li>
        </ul>
        <ul class="ProductList respl-items">
            <li class="respl-item category-10">
                <div class="unit">
                    <p class="hoverline"></p>
                    <a class="images" href="http://www.17sucai.com/"><img src="images/upload/g1.jpg"></a>
                    <h1><a href="http://www.17sucai.com/">御皇樟芝养生液</a></h1>
                    <dl>
                        <dd>产品成分:100%野生牛樟芝浓缩</dd>
                        <dd>产品功效:强免疫、活细胞、解..</dd>
                        <dd>包装规格:300ML</dd>
                    </dl>
                    <div class="view">
                        <div class="left">39 浏览</div>
                        <a class="right" href="http://www.17sucai.com/">查看<span>&gt;</span></a>
                    </div>
                </div>
            </li>
            <li class="respl-item category-20">
                <div class="unit">
                    <p class="hoverline"></p>
                    <a class="images" href="http://www.17sucai.com/"><img src="images/upload/g3.jpg"></a>
                    <h1><a href="http://www.17sucai.com/">御皇樟芝养生液</a></h1>
                    <dl>
                        <dd>产品成分:100%野生牛樟芝浓缩</dd>
                        <dd>产品功效:强免疫、活细胞、解..</dd>
                        <dd>包装规格:300ML</dd>
                    </dl>
                    <div class="view">
                        <div class="left">39 浏览</div>
                        <a class="right" href="http://www.17sucai.com/">查看<span>&gt;</span></a>
                    </div>
                </div>
            </li>
            <li class="respl-item category-20">
                <div class="unit">
                    <p class="hoverline"></p>
                    <a class="images" href="http://www.17sucai.com/"><img src="images/upload/g4.jpg"></a>
                    <h1><a href="http://www.17sucai.com/">御皇樟芝养生液</a></h1>
                    <dl>
                        <dd>产品成分:100%野生牛樟芝浓缩</dd>
                        <dd>产品功效:强免疫、活细胞、解..</dd>
                        <dd>包装规格:300ML</dd>
                    </dl>
                    <div class="view">
                        <div class="left">39 浏览</div>
                        <a class="right" href="http://www.17sucai.com/">查看<span>&gt;</span></a>
                    </div>
                </div>
            </li>
            <li class="respl-item category-10">
                <div class="unit">
                    <p class="hoverline"></p>
                    <a class="images" href="http://www.17sucai.com/"><img src="images/upload/g1.jpg"></a>
                    <h1><a href="http://www.17sucai.com/">御皇樟芝养生液</a></h1>
                    <dl>
                        <dd>产品成分:100%野生牛樟芝浓缩</dd>
                        <dd>产品功效:强免疫、活细胞、解..</dd>
                        <dd>包装规格:300ML</dd>
                    </dl>
                    <div class="view">
                        <div class="left">39 浏览</div>
                        <a class="right" href="http://www.17sucai.com/">查看<span>&gt;</span></a>
                    </div>
                </div>
            </li>
            <li class="respl-item category-10">
                <div class="unit">
                    <p class="hoverline"></p>
                    <a class="images" href="http://www.17sucai.com/"><img src="images/upload/g3.jpg"></a>
                    <h1><a href="http://www.17sucai.com/">御皇樟芝养生液</a></h1>
                    <dl>
                        <dd>产品成分:100%野生牛樟芝浓缩</dd>
                        <dd>产品功效:强免疫、活细胞、解..</dd>
                        <dd>包装规格:300ML</dd>
                    </dl>
                    <div class="view">
                        <div class="left">39 浏览</div>
                        <a class="right" href="http://www.17sucai.com/">查看<span>&gt;</span></a>
                    </div>                            
                </div>
            </li>
            <li class="respl-item category-20">
                <div class="unit">
                    <p class="hoverline"></p>
                    <a class="images" href="http://www.17sucai.com/"><img src="images/upload/g4.jpg"></a>
                    <h1><a href="http://www.17sucai.com/">御皇樟芝养生液</a></h1>
                    <dl>
                        <dd>产品成分:100%野生牛樟芝浓缩</dd>
                        <dd>产品功效:强免疫、活细胞、解..</dd>
                        <dd>包装规格:300ML</dd>
                    </dl>
                    <div class="view">
                        <div class="left">39 浏览</div>
                        <a class="right" href="http://www.17sucai.com/">查看<span>&gt;</span></a>
                    </div>
                </div>
            </li>
            <li class="respl-item category-10">
                <div class="unit">
                    <p class="hoverline"></p>
                    <a class="images" href="http://www.17sucai.com/"><img src="images/upload/g1.jpg"></a>
                    <h1><a href="http://www.17sucai.com/">御皇樟芝养生液</a></h1>
                    <dl>
                        <dd>产品成分:100%野生牛樟芝浓缩</dd>
                        <dd>产品功效:强免疫、活细胞、解..</dd>
                        <dd>包装规格:300ML</dd>
                    </dl>
                    <div class="view">
                        <div class="left">39 浏览</div>
                        <a class="right" href="http://www.17sucai.com/">查看<span>&gt;</span></a>
                    </div>                            
                </div>
            </li>
        </ul>
    </div>   
</div>
<!-- main end -->
<!-- load more -->
<div class="loadMore">
	<a href="javascript:;">更多</a>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签:

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到