jQueryベースの簡易滝流実現
56767 ワード
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ( )</title>
<style type="text/css">
.WSCWaterfall{
width: 960px;
margin: 0 auto;
}
.WSCWaterfallCell{
margin-bottom: 10px;
padding: 5px 8px;
line-height: 18px;
width: 214px;
border: 1px solid #999;
border-radius: 4px;
background-color: #ccc;
overflow: hidden;
}
.WSCWaterfallColumn{
display: inline-block;
vertical-align: top;
}
.template_div{
display: none;
}
</style>
</head>
<body>
<div class="WSCWaterfall">
</div>
<div class="template_div">
<div class="WSCWaterfallColumn"></div>
<div class="WSCWaterfallCell"></div>
</div>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript">
function WSCWaterFall(arg_obj){
var data_arr = arg_obj["data_arr"] || [];
var columnNum = arg_obj["columnNum"] || 4;
var $WSCWaterfallCell_template = arg_obj["WSCWaterfallCell_template"] || $('.template_div').find(".WSCWaterfallCell");
var $WSCWaterfallColumn_template = arg_obj["WSCWaterfallColumn_template"] || $('.template_div').find(".WSCWaterfallColumn");
var $WSCWaterfall =arg_obj["WSCWaterfall_outer"] || $(".WSCWaterfall");
var waterFallCell = arg_obj["waterFallCell_fn"] ;
var columnArr = [];
var cellArr = [];
//
for(var j=0; j<columnNum; j++){
var $WSCWaterfallColumn = $WSCWaterfallColumn_template.clone(true);
columnArr.push($WSCWaterfallColumn);
}
// ,
waterFallCell(data_arr, $WSCWaterfallCell_template, cellArr);
//
for(var k = 0; k < cellArr.length; k++){
var $WSCWaterfallCell = cellArr[k];
var index = (k % columnNum);
try{
columnArr[index].append($WSCWaterfallCell);
}
catch(e){
console.log(e);
console.log(index);
}
}
// html
for(var i=0; i< columnArr.length; i++){
// , append , append
$WSCWaterfall.append(columnArr[i]);
}
}
//
var data_arr = [];
for(var i=0; i<50; i++){
data_arr.push(i);
}
// data_arr
// columnNum
// WSCWaterfallCell_template jQuery
// WSCWaterfallColumn_template jQuery
// WSCWaterfall_outer jQuery
// waterFallCell_fn , cellArr jQuery , data_arr WSCWaterfallCell_template
WSCWaterFall({
"data_arr":data_arr,
"columnNum":4,
"WSCWaterfallCell_template" : $('.template_div').find(".WSCWaterfallCell"),
"WSCWaterfallColumn_template" :$('.template_div').find(".WSCWaterfallColumn"),
"WSCWaterfall_outer" : $(".WSCWaterfall"),
"waterFallCell_fn" : function(data_arr, $WSCWaterfallCell_template, cellArr){
for (var i = 0; i < data_arr.length; i++) {
var $WSCWaterfallCell = $WSCWaterfallCell_template.clone(true);
$WSCWaterfallCell.append(i);
cellArr.push($WSCWaterfallCell);
}
}
});
</script>
</body>
</html>
jQueryプラグインにカプセル化すると次のようになります.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> jQuery , ( )</title>
<style type="text/css">
.WSCWaterfall{
width: 960px;
margin: 0 auto;
}
.WSCWaterfallCell{
margin-bottom: 10px;
padding: 5px 8px;
line-height: 18px;
width: 214px;
border: 1px solid #999;
border-radius: 4px;
background-color: #ccc;
overflow: hidden;
}
.WSCWaterfallColumn{
display: inline-block;
vertical-align: top;
}
.template_div{
display: none;
}
</style>
</head>
<body>
<div class="WSCWaterfall">
</div>
<div class="WSCWaterfall">
</div>
<div class="template_div">
<div class="WSCWaterfallColumn"></div>
<div class="WSCWaterfallCell"></div>
</div>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript">
// data_arr
// columnNum
// WSCWaterfallCell_template jQuery
// WSCWaterfallColumn_template jQuery
// WSCWaterfall_outer jQuery
// waterFallCell_fn , cellArr jQuery , data_arr WSCWaterfallCell_template
/*
WSCWaterFall({
"data_arr":data_arr,
"columnNum":4,
"WSCWaterfallCell_template" : $('.template_div').find(".WSCWaterfallCell"),
"WSCWaterfallColumn_template" :$('.template_div').find(".WSCWaterfallColumn"),
"WSCWaterfall_outer" : $(".WSCWaterfall"),
"waterFallCell_fn" : function(data_arr, $WSCWaterfallCell_template, cellArr){
for (var i = 0; i < data_arr.length; i++) {
var $WSCWaterfallCell = $WSCWaterfallCell_template.clone(true);
$WSCWaterfallCell.append(i);
cellArr.push($WSCWaterfallCell);
}
}
});
*/
//
var data_arr = [];
for(var i=0; i<50; i++){
data_arr.push(i);
}
(function($){
$.extend($.fn, {
"WSCWaterFall": function(options){
var options = $.extend({
"data_arr":[],
"columnNum": 4
}, options);
return this.each(function(index,element){
options["WSCWaterfall_outer"] = $(element);
WSCWaterFall(options);
});
}
});
function WSCWaterFall(arg_obj){
var data_arr = arg_obj["data_arr"] ;
var columnNum = arg_obj["columnNum"];
var $WSCWaterfallCell_template = arg_obj["WSCWaterfallCell_template"] ;
var $WSCWaterfallColumn_template = arg_obj["WSCWaterfallColumn_template"] ;
var $WSCWaterfall =arg_obj["WSCWaterfall_outer"] ;
// var $WSCWaterfall = $(this);
var waterFallCell = arg_obj["waterFallCell_fn"] ;
var columnArr = [];
var cellArr = [];
//
for(var j=0; j<columnNum; j++){
var $WSCWaterfallColumn = $WSCWaterfallColumn_template.clone(true);
columnArr.push($WSCWaterfallColumn);
}
// ,
waterFallCell(data_arr, $WSCWaterfallCell_template, cellArr);
//
for(var k = 0; k < cellArr.length; k++){
var $WSCWaterfallCell = cellArr[k];
var index = (k % columnNum);
try{
columnArr[index].append($WSCWaterfallCell);
}
catch(e){
console.log(e);
console.log(index);
}
}
// html
for(var i=0; i< columnArr.length; i++){
// , append , append
$WSCWaterfall.append(columnArr[i]);
}
}
})(jQuery);
$(".WSCWaterfall").WSCWaterFall({
"data_arr":data_arr,
"columnNum": 3,
"WSCWaterfallCell_template" : $('.template_div').find(".WSCWaterfallCell"),
"WSCWaterfallColumn_template" :$('.template_div').find(".WSCWaterfallColumn"),
"waterFallCell_fn" : function(data_arr, $WSCWaterfallCell_template, cellArr){
for (var i = 0; i < data_arr.length; i++) {
var $WSCWaterfallCell = $WSCWaterfallCell_template.clone(true);
$WSCWaterfallCell.append(i);
cellArr.push($WSCWaterfallCell);
}
}
});
</script>
</body>
</html>