我们上一节说到为淘宝客网站开发出产品分类的弹出菜单，实现我们每个页面的快速跳转，那么我们今天要讨论的是如何修改一下我们的首页产品的展示方式，这里，我们会根据屏幕的大小，显示每列产品的数量，比如在电脑上，我们会每列显示3件产品数，在手机客户端上每列显示两件产品。那么为了给大家看看具体效果，我把当前做好的源码放到网站上供大家测试，测试地址如下：http://www.yeehot.com/DaoGou/
开发环境：我们这个webapp系统是基于PHP+mysql+MUI环境开发，如果不清楚如何搭建，欢迎看会之前的文章
两个比例的效果图如下：
那么，我们要实现上面的效果，应该如何操作？这里，我们主要有几个知识点，我们有圆角图片，还有布局文件，实现我们的屏幕处理
首先，我们需要实现宫格的圆角，我们把图片作为背景图放到一个DIV中，然后把DIV设置圆角
具体代码如下：
.radius-bg{
background-color:#fff!important;
background-position:center!important;
background-repeat:no-repeat!important;
background-size:100%!important;
border-radius:5px!important;
overflow:hidden;
}
.radius-bg::after{
padding-top:100%;
content:'';
display:block;
}
那么有了这个样式后，我们要说一下，MUI是如何判断屏幕的
MUI 里面有12列响应式栅格系统。我们在使用的时候添加.mui-row，在列上添加 .mui-col-[sm|xs]-[1-12]，其中，xs代表超小屏幕，少于400PX，然后大于400PX就用sm，那么这里就相当于，我们把一行分了12列，我们需要占多少列就用12除以多少，比如我要占4列，就可以用
mui-col-sm-3 mui-col-xs-3
而我在这里，我把我的购物列表展示为，手机展示2列，在电脑大屏上展示3列，那么，我的配置如下：
mui-col-xs-6 mui-col-sm-4
了解上面的规则之后，我们就可以继续在，我们的index.php上写我们的代码了
<div class="index-shop">
<label> 产品列表</label>
<ul class="mui-table-view mui-grid-view">
<?php
$type = $_GET['type'];
$page = $_GET['page'];
$pagesize = 20;
if ($page <= 1) {
$page = 1;
}
$offset = $pagesize * ($page - 1);
$res1 = mysql_query("select * from yeehot_taobaoke_shop order by id asc limit $offset,$pagesize");
while ($row1 = mysql_fetch_array($res1)) {
$img = $row1['img'];
$link = $row1['shortlink'];
echo" <li class='mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-4'>";
echo"<a href='$link'> ";
echo"<div class='radius-bg' style='background: url(". $img .");'>";
$isquan = $row1['youhuiquanminae'];
$begin = $row1['youhuiquanbegin'];
$end = $row1['youhuiquanend'];
if (strlen($begin) > 0 && strlen($end) > 0 && $isquan !='无') {
$_nowtime = date("Y-m-d", time());
$beginDate = date("Y-m-d", strtotime($begin));
$endDate = date("Y-m-d", strtotime($end));
$nowtime = time();
if ($nowtime >= strtotime($begin) && $nowtime < strtotime($end)) {
echo"<button type=\"button\" data-loading-icon-position=\"right\" class=\"mui-btn mui-btn-danger mui-pull-right btinfo \">$isquan >去领券</button>";
}
//echo $_nowtime."==".$beginDate."-=".$endDate;
}
else{
//echo "无";
}
echo"</div>";
echo"<div class='mui-media-body'>";
echo" <p class='mui-ellipsis '>". $row1['name'] ."</p>";
//echo " <p class='mui-ellipsis price'>" . $row1['price'] . "</p>";
//echo " <p class='mui-ellipsis '>月售" . $row1['count'] . "</p>";
echo" <p class='price'>";
echo" <span class='beforeprice'>月售". $row1['count'] ."</span>";
echo"<span class='afterprice mui-pull-right' >". $row1['price'] ."元</span>";
echo"</p>";
echo"</div>";
echo" </a>";
echo" </li>";
}
?>
</ul>
</div>
</div>
我已经把当前的例子放到网上测试了，如果需要源码可以给我留言，目前还有一些功能没有完善好来。
那么这里，我们就实现了根据屏幕的大小来判断每行展示的列数，那么今天讲到这里，欢迎继续关注我的头条号：一点热,如果有什么问题，欢迎留言咨询，我看到之后会第一时间回复大家的。也欢迎收藏与转发，如果需要转载到其他网站，请与我联系，yeehot.com，如果有什么意见或者想法欢迎在下方留言