<!doctype html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>瀑布流</title> ???<style type="text/css"> ???div{ ???????background: #ccc; ???????width: 200px; ???????position: absolute; ???????transition:0.5s; ???} ???</style></head><body> ???????<script type="text/javascript"> ???????createDiv () ???????function createDiv () { ???????????for (var i = 0; i < 20; i ++) { ???????????????var div = document.createElement(‘div‘); ???????????????var rnd = Math.floor(Math.random() * 300 + 50); ??//div的高度在50到350之间 ???????????????div.style.height = rnd + "px"; ???????????????div.innerHTML = i; ???????????????document.body.appendChild(div); ???????????????}; ???????????change() ???????} ???????function change() { ???????????var aDiv = document.getElementsByTagName(‘div‘); ???????????// alert(aDiv.length); ???????????var windowCW = document.documentElement.clientWidth; ?//窗口视口的宽度 ???????????var n = Math.floor(windowCW / 210); ????????????????????//一行能容纳多少个div，并向下取整 ???????????if (n <= 0) {return}; ???????????// alert(n); ???????????var t = 0; ???????????var center = (windowCW - n * 210) / 2; ??????????????????//居中 ???????????var arrH = []; ??????????????????????????????????????//定义一个数组存放div的高度 ???????????for (var i = 0; i < aDiv.length; i ++) { ???????????????var j = i % n; ???????????????if (arrH.length == n) { ???????????????????//一行排满n个后到下一行 ???????????????????????????????????????var min = findMin(arrH); ?????????????//从最“矮”的排起，可以从下图的序号中看得出来，下一行中序号是从矮到高排列的 ???????????????????aDiv[i].style.left = center + min * 210 + "px"; ??????????????????????????aDiv[i].style.top = arrH[min] + 10 + "px"; ???????????????????arrH[min] += aDiv[i].offsetHeight + 10; ???????????????????????// alert(min); ???????????????}else{ ???????????????????arrH[j] = aDiv[i].offsetHeight; ???????????????????????????aDiv[i].style.left = center + 200 * j+10 * j + "px"; ???????????????????aDiv[i].style.top = 0; ???????????????} ???????????}; ???????} ???????window.onresize = function(){ ?????//窗口改变也调用函数 ?????????????change(); ???????} ???????window.onscroll= function ?() { ???????????// 页面总高度 ???????????var bodyHeight = document.documentElement.offsetHeight; ???????????// 可视区高度 ???????????var windowHeight = document.documentElement.clientHeight; ???????????//滚动条的高度 ???????????????var srcollTop = document.documentElement.scrollTop || document.body.scrollTop; ???????????var srcollH = document.body.scrollHeight; ???????????// alert(srcollH); ???????????if (srcollTop+windowHeight ?>= srcollH-20) { ???????????????createDiv(); ???????????}; ???????} ???????function findMin(arr) { ???????????var m = 0; ???????????for (var i = 0; i < arr.length; i ++) { ???????????????m = Math.min(arr[m], arr[i]) == arr[m] ? m : i; ???????????} ???????????return m; ???????} ???</script></body></html>基本思路:
运用position: absolute来进行定位布局,从第二排开始每次寻找高度最小的位置插入元素
原生js实现的瀑布流布局
原文地址：http://www.cnblogs.com/shenjp/p/7486022.html