很喜欢这种布局：大方不失雅致：

这仅仅只是初步，后期上线估计还要润色，当然用的flex布局换行而已

看来日本人还是很注重设计美学的

1. {
   
2.   "shoes": [
   
3.     {
   
4.       "name": "ビビッドランニングシューズ　防水性　軽量タイプ　グリーン",
   
5.       "description": "足元から気持ちを明るく、をコンセプトにしたビビッドカラーシリーズ。防水・防風・撥水性あり、屋外向け。",
   
6.       "price": 9560,
   
7.       "commentsNum": 16,
   
8.       "photoFileName": "shoes-01.jpg",
   
9.       "rating": 4.5
   
10.     },
    
11.     {
    
12.       "name": "カジュアルシューズ　防臭効果と通気性◎　ブルーグレー",
    
13.       "description": "特殊加工した樹脂を使用し、通気性も抜群。特に汗をかきやすい夏の時期、普段使いに。",
    
14.       "price": 5400,
    
15.       "commentsNum": 47,
    
16.       "photoFileName": "shoes-02.jpg",
    
17.       "rating": 4.0
    
18.     },
    
19.     {
    
20.       "name": "カジュアルランニングシューズ　ベージュ",
    
21.       "description": "ランニングにはもちろん、ふんわりクッション性のあるソールは床に傷がつきにくく、屋内でも安心して使えます。",
    
22.       "price": 6600,
    
23.       "commentsNum": 13,
    
24.       "photoFileName": "shoes-03.jpg",
    
25.       "rating": 3.0
    
26.     },
    
27.     {
    
28.       "name": "カジュアルシューズ　普段使いや通勤・通学にも！",
    
29.       "description": "柔らかく丈夫な合皮を使用しており、通勤や通学にもぴったり。コーデの邪魔をしないシックなコンビカラーです。",
    
30.       "price": 6900,
    
31.       "commentsNum": 41,
    
32.       "photoFileName": "shoes-04.jpg",
    
33.       "rating": 3.5
    
34.     },
    
35.     {
    
36.       "name": "ビビッドランニングシューズ　防滑性　ブルー",
    
37.       "description": "足元から気持ちを明るく、をコンセプトにしたビビッドカラーシリーズ。通気性・防滑性あり、屋内向け。",
    
38.       "price": 9800,
    
39.       "commentsNum": 41,
    
40.       "photoFileName": "shoes-05.jpg",
    
41.       "rating": 3.5
    
42.     },
    
43.     {
    
44.       "name": "ランニングシューズ　防水性　ダークグレー＆グリーン",
    
45.       "description": "足元に蛍光色をオンして、ランニングも楽しく！防水メッシュ加工で、雨の日でも快適な履き心地です。",
    
46.       "price": 7000,
    
47.       "commentsNum": 14,
    
48.       "photoFileName": "shoes-06.jpg",
    
49.       "rating": 3.0
    
50.     },
    
51.     {
    
52.       "name": "ランニングシューズ　防風性　ブラック＆ブルー",
    
53.       "description": "完全防水・滑りにくいグリップで初心者から上級者まで、幅広いランナーに対応。風を通しにくく真冬のランでも安心。",
    
54.       "price": 7000,
    
55.       "commentsNum": 20,
    
56.       "photoFileName": "shoes-07.jpg",
    
57.       "rating": 4.5
    
58.     },
    
59.     {
    
60.       "name": "ランニングシューズ　防滑性　ダークグレー＆レッド",
    
61.       "description": "完全防水・滑りにくいグリップを採用。風を通しにくく真冬のランでも安心。こちらは軽量ゴム紐タイプで結ぶ手間ゼロ。",
    
62.       "price": 8000,
    
63.       "commentsNum": 11,
    
64.       "photoFileName": "shoes-08.jpg",
    
65.       "rating": 4.5
    
66.     },
    
67.     {
    
68.       "name": "ビビッドランニングシューズ　クッション性　ピンク",
    
69.       "description": "足元から気持ちを明るく、をコンセプトにしたビビッドカラーシリーズ。通気性・クッション性があり屋内屋外兼用。",
    
70.       "price": 9980,
    
71.       "commentsNum": 24,
    
72.       "photoFileName": "shoes-09.jpg",
    
73.       "rating": 4.5
    
74.     },
    
75.     {
    
76.       "name": "ウォーキングシューズ　屈曲性超軽量タイプ　ホワイト",
    
77.       "description": "超軽量薄型。踏み返しをしながら歩行ができる設計になっており、ウォーキングの際の足にかかるストレスを軽減。",
    
78.       "price": 8000,
    
79.       "commentsNum": 46,
    
80.       "photoFileName": "shoes-10.jpg",
    
81.       "rating": 3.5
    
82.     },
    
83.     {
    
84.       "name": "バスケットシューズ　カジュアルメンズ　マルチカラー",
    
85.       "description": "クッション性や反発力、耐久性などの機能性を網羅しており、足首から爪先までしっかりフィットします。",
    
86.       "price": 9900,
    
87.       "commentsNum": 52,
    
88.       "photoFileName": "shoes-11.jpg",
    
89.       "rating": 4.0
    
90.     },
    
91.     {
    
92.       "name": "カジュアル　ウォーキングシューズ　大きいサイズあり",
    
93.       "description": "男女兼用でサイズ展開も豊富！ビッグサイズも一部取扱いあり。ミッドソールはジェル素材で、膝への負担も軽減！",
    
94.       "price": 7900,
    
95.       "commentsNum": 59,
    
96.       "photoFileName": "shoes-12.jpg",
    
97.       "rating": 4.5
    
98.     }
    
99.   ]
    
100. }
     

复制代码

一个json解决了，当然如果是vue或者react不是叫json，叫对象字面量，但是这里是xxx.json.

上面的图片，我本来不想说，我用了算法，就是三次贝塞尔曲线