<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>waterFall01-css多列</title> <style> html,body{ margin:0; padding: 0; } #container{ column-width:250px;/*列宽*/ -webkit-column-width:250px; -moz-column-width:250px; column-gap:5px;/*列间距*/ -webkit-column-gap:5px; -moz-column-gap:5px; } .item{ margin:5px 0;/*因为左右有gap*/ padding:10px; border: 1px solid #ccc; box-shadow: 0 0 6px #ccc; border-radius: 5px; } .item img{ width: 100%; } .item p{ text-align: center; font-family: Microsoft Yahei; } </style></head><body> <div id="container"> <div class="item"><img src="images/01/img (1).jpg" alt=""></div> <div class="item"><img src="images/01/img (2).jpg" alt=""></div> <div class="item"><img src="images/01/img (3).jpg" alt=""><p>描述信息</p></div> <div class="item"><img src="images/01/img (4).jpg" alt=""></div> <div class="item"><img src="images/01/img (5).jpg" alt=""></div> <div class="item"><img src="images/01/img (6).jpg" alt=""></div> <div class="item"><img src="images/01/img (7).jpg" alt=""></div> <div class="item"><img src="images/01/img (8).jpg" alt=""></div> <div class="item"><img src="images/01/img (9).jpg" alt=""></div> <div class="item"><img src="images/01/img (10).jpg" alt=""></div> <div class="item"><img src="images/01/img (11).jpg" alt=""></div> <div class="item"><img src="images/01/img (12).jpg" alt=""></div> <div class="item"><img src="images/01/img (13).jpg" alt=""></div> <div class="item"><img src="images/01/img (14).jpg" alt=""></div> <div class="item"><img src="images/01/img (15).jpg" alt=""></div> <div class="item"><img src="images/01/img (16).jpg" alt=""></div> <div class="item"><img src="images/01/img (17).jpg" alt=""></div> <div class="item"><img src="images/01/img (18).jpg" alt=""></div> <div class="item"><img src="images/01/img (19).jpg" alt=""></div> <div class="item"><img src="images/01/img (20).jpg" alt=""></div> <div class="item"><img src="images/01/img (21).jpg" alt=""></div> <div class="item"><img src="images/01/img (22).jpg" alt=""></div> <div class="item"><img src="images/01/img (23).jpg" alt=""><p>描述信息</p></div> <div class="item"><img src="images/01/img (21).jpg" alt=""></div> <div class="item"><img src="images/01/img (22).jpg" alt=""></div> <div class="item"><img src="images/01/img (23).jpg" alt=""><p>描述信息</p></div> <div class="item"><img src="images/01/img (1).jpg" alt=""></div> <div class="item"><img src="images/01/img (2).jpg" alt=""></div> <div class="item"><img src="images/01/img (3).jpg" alt=""></div> <div class="item"><img src="images/01/img (9).jpg" alt=""><p>描述信息</p></div> <div class="item"><img src="images/01/img (4).jpg" alt=""></div> <div class="item"><img src="images/01/img (5).jpg" alt=""></div> <div class="item"><img src="images/01/img (9).jpg" alt=""><p>描述信息</p></div> <div class="item"><img src="images/01/img (20).jpg" alt=""></div> <div class="item"><img src="images/01/img (11).jpg" alt=""></div> <div class="item"><img src="images/01/img (19).jpg" alt=""></div> <div class="item"><img src="images/01/img (13).jpg" alt=""></div> <div class="item"><img src="images/01/img (15).jpg" alt=""></div> <div class="item"><img src="images/01/img (14).jpg" alt=""></div> <div class="item"><img src="images/01/img (16).jpg" alt=""></div> <div class="item"><img src="images/01/img (21).jpg" alt=""></div> <div class="item"><img src="images/01/img (17).jpg" alt=""></div> <div class="item"><img src="images/01/img (18).jpg" alt=""></div> <div class="item"><img src="images/01/img (12).jpg" alt=""></div> <div class="item"><img src="images/01/img (9).jpg" alt=""><p>描述信息</p></div> <div class="item"><img src="images/01/img (10).jpg" alt=""></div> <div class="item"><img src="images/01/img (6).jpg" alt=""></div> <div class="item"><img src="images/01/img (7).jpg" alt=""></div> <div class="item"><img src="images/01/img (8).jpg" alt=""></div> </div></body></html>二、javaScript 实现原理：原生js操作dom,动态插入新图片 上代码： <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>waterFall02</title> <style> *{ margin: 0; padding: 0; } #main{ position: relative;; } .item{ padding: 15px 0 0 15px; float: left; } .box{ padding: 10px; border: 1px solid #ccc; box-shadow: 0 0 6px #ccc; border-radius: 5px; } .box img{ width:162px; } </style> <script> window.onload = function(){ waterFall("#main",".item"); var fakeData = {'data':[{'src':'img (1).jpg'},{'src':'img (2).jpg'},{'src':'img (3).jpg'},{'src':'img (5).jpg'},{'src':'img (9).jpg'},{'src':'img (4).jpg'},{'src':'img (6).jpg'},{'src':'img (7).jpg'}]}; window.onscroll = function(){ if(checkScroll()){ var oParent = g("#main"), oItem, oBox, oImg; for(var i = 0;i < fakeData.data.length; i++){ oItem = c("div"); oItem.className = "item"; oParent.appendChild(oItem); oBox = c("div"); oBox.className = "box"; oItem.appendChild(oBox); oImg = c("img"); oImg.src = "images/01/" + fakeData.data[i].src; oBox.appendChild(oImg); } waterFall("#main",".item"); } } }; function g(selector){ return selector.substr(0,1) === "#" ? document.getElementById(selector.substr(1)) : document.getElementsByClassName(selector.substr(1)); } function c(ele){ return document.createElement(ele); } function waterFall(parent, item){ var oParent = g(parent); var items = g(item); var iWidth = items[0].offsetWidth; var cols = Math.floor(document.documentElement.clientWidth / iWidth); oParent.style.cssText = "width:" + iWidth * cols +"px;margin: 0 auto;"; var iHeightArr = [],iHeight, minH, minHIndex; for(var i = 0;i < items.length; i++){ iHeight = items[i].offsetHeight;
新闻热点
疑难解答
