记一次糟糕的折腾经历

之前用“AutoPhotos”插件来实现文章内图片排板，换主题后由于主题使用原生 js，而插件需要加载 JQ，强迫症严重的我自然不想加载一些乱七八糟的文件，尤其是这种只应用在一个场景的更属浪费资源，于是想着通过 AI 将插件所需的转换成原生 JS，但效果并不理想。

后来想把 JDEAL 的图片排版 JS 扒过来用，经过多次尝试都失败了😇，昨天突然灵光一闪竞然给扒过来了，我草……

顺带着移除懒加载以及灯箱，都用上原生 JS 配套了😁，一切看起来顺理成章，一帆风险的赶脚，但图片排板不太满意，图片之间没有间距，排列在一起显得不那么好看。

如上图所示，挤在一起了，于是在 css 添加margin:1px来添加一个间距，但。。。由于 JS 获取到图片宽高计算每张图片所占的百分比，尼玛加了之后图片被挤到下一行了，然后想着修改 JS，但花了超多时间最后以失败告终，昨天搞到凌晨 3 点半仍未解决，上床后还他妈的失眠啦～。

不出意外就要出意外，早上突然想到了通过给父元素添加display:flex;flex-wrap:nowrap;属性，然后在设置 margin 完美解决😁，真是服了自已，这么简单的事让我搞得无比复杂。

至此完美解决了之前的遗憾，一次性解决了包括懒加载、灯箱、图片排版、内容替换事项，good！

现在文章内的图片标签可以呈现三种形态，[IMG包裹的图片、[photos包裹的图片、以及没有任何包裹的独立<img 格式，如图所见，单张图片可见本文前两张图，可以更美观的对图片进行排版布局。

完美的一 B，在次感谢 JDEAL 写出的原生 JS，经过加工改造后如我所愿……🤗