javascript - 框架没有初始化怎么调用
本文介绍了javascript - 框架没有初始化怎么调用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
(function($){
$.fn.WaterFall = function(){
/*把当前盒子下面的所有的子元素初始化成瀑布流的布局*/
/*瀑布流容器*/
var $this = $(this);
var parentWidth = $this.width();
/*瀑布流容器当中的item*/
var items = $this.children();
var childWidth = items.width();
/*多少列*/
var columnCount = 2;
/*间距*/
var space = 10;
/*需要记录高度的变化 每一列的高度的变化*/
var columnArray = [];
/*遍历items盒子*/
items.each(function(index,obj){
/*当前的遍历到对象*/
var $obj = $(obj);
var height = $obj.outerHeight();
/*第一列有点特殊 所有的top都是0 当前还是没有高度columnArray*/
if(index < columnCount){
columnArray[index] = height;
/*针对每一个盒子设置定位*/
$obj.css({top:0,left:index*(childWidth+space)});
}
/*正常情况下*/
else{
/*每一次都需要追加到最矮的那一列*/
/*怎么样找到最矮的那一列???*/
/*假设 我们先的第一个数据就是 最矮的*/
var min = columnArray[0];
var min_index = 0;
for(var i = 0 ; i < columnArray.length ; i ++){
if( min > columnArray[i]){
min = columnArray[i];
min_index = i;
}
}
/*当我们加一个盒子之后 我们要跟新当前列的高度*/
columnArray[min_index] += height +10;
/*算定位*/
$obj.css({
top: min + 10,
left:min_index*(childWidth+space)
});
/*min_index 就是你去追加的那一个列的索引*/
}
//console.log("当前每一列的高度:"+columnArray);
});
/*最后来设置瀑布流容器的高度*/
/*获取最高的那一列*/
var max = columnArray[0];
for(var j = 0;j<columnArray.length;j++){
if(max < columnArray[j]){
max = columnArray[j];
}
}
$this.height(max);
}
})(jQuery);
解决方案
// 仅仅是 jquery 的一个小插件,不算框架
$.fn.WaterFall = function(){}
PS: HTML代码格式可能有要求,建议你找找该插件的DEMO
你选择一个容器绑定就可用了。
如: $('#div').WaterFall();
这篇关于javascript - 框架没有初始化怎么调用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文