这里提供两种方法：
1.每3个就在后面加上<br><br>，注意是两个br这样就换行了。
2.用css来实现，控制.goods的宽度。
一般为33%，不知道你的.goods类是怎么写的，如果有margin的话就要比33%小一点。
具体代码：
<style>
* {
margin: 0
padding: 0
}
.goods {
border: 1px solid #ccc
height: 100px
width: 33.333%
float: left
box-sizing:border-box
padding:10px
}
</style>
<div class="goods">1</div>
<div class="goods">2</div>
<div class="goods">3</div>
<div class="goods">4</div>
<div class="goods">5</div>
<div class="goods">6</div>
关键点有两个，一是两个图片要重叠，二是把重叠上去的图片绘制成三角形。
关于第二点需要用到clip-path属性。它有很多用法，可以绘制多边形，圆形，椭圆形和圆角。
关于clip-path的使用
polygon
值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。
左上角为原点，右下角是(100%,100%)的点。
circle
值为一个坐标点和半径组成。
左上角为原点，右下角是(100%,100%)的点。
定义半径的时候可以用at关键字来定义坐标。
ellipse
值为椭圆的x轴半径，y轴半径，定位椭圆的坐标三部分组成。
左上角为原点，右下角是(100%,100%)的点。
at关键字将半径和坐标分开。
inset
值为(上 右 下 左 round 左上角radius 右上角radius 右下角radius 左下角radius)
round前面的数值，表示的是距离，如果第一个值为25%，则表示图像在上面从25%开始绘制。
为什么我要说这么多废话，因为字数少了百度觉得答案不靠谱！！
以下为代码：
以下为效果图
请点采纳！
