html瀑布流布局原理,折腾:瀑布流布局（基于多栏列表流体布局实现）

我参照你的瀑布流效果，用对象字面量的形式写了一个js，只想问一个问题，为什么浏览器滚动时，sideMenu.scroll()没有响应呢？

我的设计思路是把页面上所有类anchor-link的绝对位置存入一个数组，每次滚动时，遍历这个数组，如果滚动值大于数组内的某个值，则为相应的类添加样式。表现形式就是浏览器滚动到某个锚点时，侧栏的锚点链接有相应的变化，比如背景色改变等等。

ps.我上传的页面是老版本的，结构还没改。我从上午10点纠结到现在，还是没解决，希望有时间的时候能帮我看下……感激不尽

var sideMenu = {

itemLink: “anchor-link”,

menuID: “side-menu”,

scrollTop: document.documentElement.scrollTop || document.body.scrollTop,

arrItem: function() {

var arr = [];

var itemOffset = [];

var itemName = [];

var items = getElementsByClassName(this.itemLink);

var itemMenu = getChildNodes(this.menuID,”a”);

for (var i = 0; i 100) {

self.scrollTop = scrollTop;

self.addDetect();

}

};

return this;

},

addDetect: function(){

var start = 0;

do {

var itemOffset = arr[0][i];

if (start >= arr[0].length-1) {

break;

};

start ++;

} while (itemOffset > this.scrollTop);

var currentItem = arr[1][start];

this.addEffect(currentItem);

return this;

},

addEffect: function( currentItem ){

alert(currentItem);

return currentItem;

},

init: function() {

if (this.itemLink && this.menuID) {

this.arrItem().scroll();

}

}

};

sideMenu.init();

/*用到的函数*/

var getElementsByClassName = function(searchClass,node,tag) {

if(document.getElementsByClassName){

return document.getElementsByClassName(searchClass)

}else{

node = node || document;

tag = tag || ‘*’;

var returnElements = []

var els = (tag === “*” && node.all)? node.all : node.getElementsByTagName(tag);

var i = els.length;

searchClass = searchClass.replace(/\-/g, “\\-“);

var pattern = new RegExp(“(^|\\s)”+searchClass+”(\\s|$)”);

while(–i >= 0){

if (pattern.test(els[i].className) ) {

returnElements.push(els[i]);

}

}

return returnElements;

}

}

function getElementTop(element) {

var actualTop = element.offsetTop;

var current = element.offsetParent;

while (current !== null){

actualTop += current.offsetTop;

current = current.offsetParent;

}

return actualTop;

}

function getChildNodes(){

var node = new Array();

if(arguments.length == 1 ){ //1.判断参数个数

var temp = document.getElementById(arguments[0]).childNodes; //2.获取ul下所有子节点(包括text节点、空格)

for(var i=0;i

if(temp.nodeType == 1 && temp.tagName){ //3.判断节点类型

node.push(temp); //4.节点压栈

}

}

return node; //5.返回节点列表(类似数组)

}

else if(arguments.length == 2){ //1.判断参数个数

return document.getElementById(arguments[0]).getElementsByTagName(arguments[1]); //2.返回节点列表(类似数组)

}

}