大图简约版代码

屿风

屿风

1. <div class="dz_attach_masonry_20260906">
   
2. <style>
   
3. /* ===== 唯一命名空间 dz_attach_masonry_20260906：仅作用于本模块，不污染论坛 ===== */
   
4. .dz_attach_masonry_20260906 { max-width: 800px; margin: 12px auto; }
   
5. .dz_attach_masonry_20260906 .am-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
   
6. .dz_attach_masonry_20260906 .am-col { display: flex; flex-direction: column; gap: 12px; }
   
7. .dz_attach_masonry_20260906 a { display: block; border-radius: 12px; overflow: hidden; text-decoration: none; }
   
8. .dz_attach_masonry_20260906 a:focus,
   
9. .dz_attach_masonry_20260906 a:active { outline: none; }
   
10. .dz_attach_masonry_20260906 img { width: 100%; height: auto; display: block; border-radius: 8px; }
    
11. /* 移动端 */
    
12. @media (max-width: 640px) {
    
13.   .dz_attach_masonry_20260906 { max-width: 100%; }
    
14.   .dz_attach_masonry_20260906 .am-grid { gap: 4px; }
    
15.   .dz_attach_masonry_20260906 .am-col { gap: 8px; }
    
16. }
    
17. </style>
    
18. 
    
19. <div class="am-grid">
    
20.   <div class="am-col" data-side="left"></div>
    
21.   <div class="am-col" data-side="right"></div>
    
22. </div>
    
23. 
    
24. <script>
    
25. (function(){
    
26.   // 用 currentScript 锁定"本楼"容器：多个回复框各贴一份时互不干扰
    
27.   const root = document.currentScript && document.currentScript.closest
    
28.     ? document.currentScript.closest('.dz_attach_masonry_20260906')
    
29.     : document.querySelector('.dz_attach_masonry_20260906');
    
30.   if(!root) return;
    
31.   const colL = root.querySelector('[data-side="left"]');
    
32.   const colR = root.querySelector('[data-side="right"]');
    
33.   if(!colL || !colR) return;
    
34. 
    
35.   // ==========【在这里粘贴全部 <a><img src="xxx"></a> 图片代码】==========
    
36.   let imageItemsHtml = `
    
37. <!-- 《图片位置》 -->
    
38. 
    
39. 
    
40. `;
    
41. 
    
42.   const temp = document.createElement('div');
    
43.   temp.innerHTML = imageItemsHtml;
    
44.   const items = Array.from(temp.children);
    
45.   items.forEach(function(item, index){
    
46.     if(index % 2 === 0){
    
47.       colL.appendChild(item);
    
48.     } else {
    
49.       colR.appendChild(item);
    
50.     }
    
51.   });
    
52. })();
    
53. </script>
    
54. </div>
    

复制代码