大图简约版代码
<div class="dz_attach_masonry_20260906"><style>
/* ===== 唯一命名空间 dz_attach_masonry_20260906：仅作用于本模块，不污染论坛 ===== */
.dz_attach_masonry_20260906 { max-width: 800px; margin: 12px auto; }
.dz_attach_masonry_20260906 .am-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dz_attach_masonry_20260906 .am-col { display: flex; flex-direction: column; gap: 12px; }
.dz_attach_masonry_20260906 a { display: block; border-radius: 12px; overflow: hidden; text-decoration: none; }
.dz_attach_masonry_20260906 a:focus,
.dz_attach_masonry_20260906 a:active { outline: none; }
.dz_attach_masonry_20260906 img { width: 100%; height: auto; display: block; border-radius: 8px; }
/* 移动端 */
@media (max-width: 640px) {
.dz_attach_masonry_20260906 { max-width: 100%; }
.dz_attach_masonry_20260906 .am-grid { gap: 4px; }
.dz_attach_masonry_20260906 .am-col { gap: 8px; }
}
</style>
<div class="am-grid">
<div class="am-col" data-side="left"></div>
<div class="am-col" data-side="right"></div>
</div>
<script>
(function(){
// 用 currentScript 锁定"本楼"容器：多个回复框各贴一份时互不干扰
const root = document.currentScript && document.currentScript.closest
? document.currentScript.closest('.dz_attach_masonry_20260906')
: document.querySelector('.dz_attach_masonry_20260906');
if(!root) return;
const colL = root.querySelector('');
const colR = root.querySelector('');
if(!colL || !colR) return;
// ==========【在这里粘贴全部 <a><img src="xxx"></a> 图片代码】==========
let imageItemsHtml = `
<!-- 《图片位置》 -->
`;
const temp = document.createElement('div');
temp.innerHTML = imageItemsHtml;
const items = Array.from(temp.children);
items.forEach(function(item, index){
if(index % 2 === 0){
colL.appendChild(item);
} else {
colR.appendChild(item);
}
});
})();
</script>
</div>
<div class="dz_attach_masonry_20260906">
<style>
/* ===== 唯一命名空间 dz_attach_masonry_20260906：仅作用于本模块，不污染论坛 ===== */
.dz_attach_masonry_20260906 { max-width: 800px; margin: 12px auto; }
.dz_attach_masonry_20260906 .am-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dz_attach_masonry_20260906 .am-col { display: flex; flex-direction: column; gap: 12px; }
.dz_attach_masonry_20260906 a { display: block; border-radius: 12px; overflow: hidden; text-decoration: none; }
.dz_attach_masonry_20260906 a:focus,
.dz_attach_masonry_20260906 a:active { outline: none; }
.dz_attach_masonry_20260906 img { width: 100%; height: auto; display: block; border-radius: 8px; }
/* 移动端 */
@media (max-width: 640px) {
.dz_attach_masonry_20260906 { max-width: 100%; }
.dz_attach_masonry_20260906 .am-grid { gap: 4px; }
.dz_attach_masonry_20260906 .am-col { gap: 8px; }
}
</style>
<div class="am-grid">
<div class="am-col" data-side="left"></div>
<div class="am-col" data-side="right"></div>
</div>
<script>
(function(){
// 用 currentScript 锁定"本楼"容器：多个回复框各贴一份时互不干扰
const root = document.currentScript && document.currentScript.closest
? document.currentScript.closest('.dz_attach_masonry_20260906')
: document.querySelector('.dz_attach_masonry_20260906');
if(!root) return;
const colL = root.querySelector('');
const colR = root.querySelector('');
if(!colL || !colR) return;
// ==========【在这里粘贴全部 <a><img src="xxx"></a> 图片代码】==========
let imageItemsHtml = `
<!-- 《图片位置》 -->
`;
const temp = document.createElement('div');
temp.innerHTML = imageItemsHtml;
const items = Array.from(temp.children);
items.forEach(function(item, index){
if(index % 2 === 0){
colL.appendChild(item);
} else {
colR.appendChild(item);
}
});
})();
</script>
</div>
页:
[1]