之前用“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，经过加工改造后如我所愿……?
本文著作权归作者 [ 王叔书 ] 享有，未经作者书面授权，禁止转载，封面图片来源于 [ 互联网 ] ，本文仅供个人学习、研究和欣赏使用。如有异议，请联系博主及时处理。