商品列表行、块展示切换
发布时间
阅读量：
阅读量
商品列表行、块展示切换效果
效果图：
主要思路：
编写两个CSS样式分别用于实现行展示和块展示功能；默认情况下仅在页面中显示一个行展示CSS样式；当点击切换按钮时，在HTML文档中替换现有CSS为块展示CSS样式
主要代码块：
<div class="demand_list_1 clearfloat">
<div class="demand_item">
<a class="item_img"><img src="images/direct_purchase/Seasoning.png" /></a>
<div>
<a class="title">白泉熏鱼</a>
<p class="item_list">
<span>价格:￥23.00</span>
<span>分类:干货</span>
</p>
<div class="clear">
</div>
<p class="time">2018.09.09发布</p>
</div>
</div>
<div class="demand_item">
<a href="" class="item_img"><img src="images/direct_purchase/Seasoning.png" /></a>
<div>
<a href="" class="title">白泉熏鱼</a>
<p class="item_list">
<span>价格:￥23.00</span>
<span>分类:干货</span>
</p>
<div class="clear">
</div>
<p class="time">2018.09.09发布</p>
</div>
</div>
<div class="demand_item">
<a href="" class="item_img"><img src="images/direct_purchase/Seasoning.png" /></a>
<div>
<a href="" class="title">白泉熏鱼</a>
<p class="item_list">
<span>价格:￥23.00</span>
<span>分类:干货</span>
</p>
<div class="clear">
</div>
<p class="time">2018.09.09发布</p>
</div>
</div>
<div class="demand_item">
<a href="" class="item_img"><img src="images/direct_purchase/Seasoning.png" /></a>
<div>
<a href="" class="title">白泉熏鱼</a>
<p class="item_list">
<span>价格:￥23.00</span>
<span>分类:干货</span>
</p>
<div class="clear">
</div>
<p class="time">2018.09.09发布</p>
</div>
</div>
</div>
代码解读 gride-line.css
.demand_list_1 {
margin-top: 5%;
/*margin-left: 1px;*/
}
.demand_list_1>.demand_item:first-child {
margin-top: 0px;
border-top: 1px solid #E8E8E8;
}
.clearfloat:after {
display: block;
content: "";
clear: both;
height: 0;
visibility: hidden;
}
.demand_item {
border: 1px solid #edecec;
font-size: 14px;
color: #666;
border-bottom: 1px solid #E8E8E8;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: flex-start;
}
.demand_item>a {
float: left;
width: 60%;
margin: 2.5%;
}
.demand_item>div {
width: 89%;
float: left;
padding: 10px;
}
.demand_item img {
/*height: 91px;*/
width: 100%;
max-width: 100%;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.demand_item .title {
font-size: 16px;
font-weight: 600;
text-decoration: none;
display: block;
overflow: hidden;
color: #3d3d3d;
}
.demand_item .item_list {
float: left;
width: 100%;
margin-top: 20px;
color: #999;
}
.demand_item p {
margin-bottom: 10px;
}
.demand_item>div p:last-child {
margin-bottom: 0;
}
.demand_item .time {
color: #999;
text-align: right;
margin-top: 10px;
}
.clear {
clear: both;
}
.demand_item p span:first-child {
float: left;
}
.demand_item p span:last-child {
float: right;
}
代码解读 gride.css
.demand_list_1 {
margin-left: 1.5px;
}
.demand_list_1>.demand_item:first-child {
/*margin-top: 0px;*/
border-top: 1px solid #E8E8E8;
}
.clearfloat:after {
display: block;
content: "";
clear: both;
height: 0;
visibility: hidden;
}
.demand_item {
border: 1px solid #edecec;
float: left;
margin: 5px;
width: 46%;
font-size: 14px;
color: #666;
border-bottom: 1px solid #E8E8E8;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: flex-start;
flex-direction: column;
border-radius: 5px;
}
.demand_item>a {
float: left;
width: 98%;
}
.demand_item>div {
width: 100%;
float: left;
padding: 10px;
}
.demand_item img {
/*height: 91px;*/
width: 100%;
max-width: 100%;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.demand_item .title {
font-size: 16px;
font-weight: 600;
text-decoration: none;
display: block;
overflow: hidden;
color: #3d3d3d;
}
.demand_item .item_list {
float: left;
width: 100%;
color: #999;
}
.demand_item p {
margin-bottom: 10px;
}
.demand_item>div p:last-child {
margin-bottom: 0;
}
.demand_item .time {
color: #999;
text-align: right;
}
.clear {
clear: both;
}
.demand_item p span:first-child {
float: left;
}
.demand_item p span:last-child {
float: right;
}
代码解读 <script>
var grid = false; //默认为行展示
$(".grid span").on('click', function() {
if(!grid) { //块展示
//因为把gride.css放在link第一行了，图省事就这样写了
$("link:first").attr("href", "css/grid.css")
$(".grid span").removeClass("icon-grid-line");
$(".grid span").addClass("icon-grid");
} else { //行展示
$("link:first").attr("href", "css/grid-line.css");
var aa = "icon-grid";
$(".grid span").removeClass("icon-grid");
$(".grid span").addClass("icon-grid-line");
}
grid = !grid;
var cssName = $("link:first").attr("href");
});
})
</script>
代码解读拓展：
上述步骤存在一定的局限性，在页面刷新时商品列表会重新以行显示的状态出现。经过思考后发现：如何能够将当前页面的显示状态进行记录，并确保在 subsequent 页面打开时仍能维持这一状态呢？经过尝试发现：可以借助 sessionStorage 来实现这一功能。具体方法是将当前展示的 CSS 信息保存至 sessionStorage 中；每当访问该页面时，则会从 sessionStorage 中读取并应用相应的 CSS 风格信息。这种机制不仅适用于文章阅读功能的延续性体验，在其他场景如数据展示等同样具有广泛的应用潜力
全部评论 (0)
还没有任何评论哟~