javascript - 如何使网站的图像相对于其页面浏览量或点击量增大？

Question

场景:

我有一个非常基本的 html 网站，其中有一系列图像并排集中在一起。这些图像还链接到相应的文章，当光标悬停在每个图像上时，页面中央会生成链接文章的详细描述。

目标:

1. 我希望图像的大小相对于图像的链接文章收到的综合浏览量增加一定百分比。文章点击量越多，图片链接就越大。
2. 同时，图像(长宽比/尺寸各不相同)会自动重新排序或随机排列，以响应式方式最适合页面。

任何想法、创意或意见都将不胜感激。

Answer 1

我认为最好的起点是 flex-box，你可以了解 here .

这里的重要方面是(来自上面的同一来源):

盒子弹性 值: 0 |任意整数 这个 child 的灵 active 比率。如果一个 child 有 1，而其 sibling 有 2，则父盒子中的任何额外空间将被 sibling 占用两倍的空间。默认为0，不灵活。

因此您可以设置此选项以使某些框比其他框占用更多空间，依此类推。不过显然你需要为此做一些数学计算。