https://www.isoladicapraia.it/scripts/wookmark/js/jquery.wookmark.js

1/*!
2  jQuery Wookmark plugin 0.5
3  @name jquery.wookmark.js
4  @author Christoph Ono ([email protected] or @gbks)
5  @version 0.5
6  @date 3/19/2012
7  @category jQuery plugin
8  @copyright (c) 2009-2012 Christoph Ono (www.wookmark.com)
9  @license Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
10*/
11$.fn.wookmark = function(options) {
12  
13  if(!this.wookmarkOptions) {
14    this.wookmarkOptions = $.extend( {
15        container: $('body'),
16        offset: 2,
17        autoResize: false,
18        itemWidth: $(this[0]).outerWidth(),
19        resizeDelay: 50
20      }, options);
21  } else if(options) {
22    this.wookmarkOptions = $.extend(this.wookmarkOptions, options);
23  }
24  
25  // Layout variables.
26  if(!this.wookmarkColumns) {
27    this.wookmarkColumns = null;
28    this.wookmarkContainerWidth = null;
29  }
30  
31  // Main layout function.
32  this.wookmarkLayout = function() {
33    // Calculate basic layout parameters.
34    var columnWidth = this.wookmarkOptions.itemWidth + this.wookmarkOptions.offset;
35    var containerWidth = this.wookmarkOptions.container.width();
36    var columns = Math.floor((containerWidth+this.wookmarkOptions.offset)/columnWidth);
37    var offset = 0//YSW Math.round((containerWidth - (columns*columnWidth-this.wookmarkOptions.offset))/2);
38    
39    // If container and column count hasn't changed, we can only update the columns.
40    var bottom = 0;
41    if(this.wookmarkColumns != null && this.wookmarkColumns.length == columns) {
42      bottom = this.wookmarkLayoutColumns(columnWidth, offset);
43    } else {
44      bottom = this.wookmarkLayoutFull(columnWidth, columns, offset);
45    }
46    
47    // Set container height to height of the grid.
48    this.wookmarkOptions.container.css('height', bottom+'px');
49  };
50  
51  /**
52   * Perform a full layout update.
53   */
54  this.wookmarkLayoutFull = function(columnWidth, columns, offset) {
55    // Prepare Array to store height of columns.
56    var heights = [];
57    while(heights.length < columns) {
58      heights.push(0);
59    }
60    
61    // Store column data.
62    this.wookmarkColumns = [];
63    while(this.wookmarkColumns.length < columns) {
64      this.wookmarkColumns.push([]);
65    }
66    
67    // Loop over items.
68    var item, top, left, i=0, k=0, length=this.length, shortest=null, shortestIndex=null, bottom = 0;
69    for(; i<length; i++ ) {
70      item = $(this[i]);
71      
72      // Find the shortest column.
73      shortest = null;
74      shortestIndex = 0;
75      for(k=0; k<columns; k++) {
76        if(shortest == null || heights[k] < shortest) {
77          shortest = heights[k];
78          shortestIndex = k;
79        }
80      }
81
82  // Postion the item.
83  /*item.css({
84      position: 'absolute', 
85      top: shortest + 'px',
86      left: (shortestIndex * columnWidth + offset) + 'px'
87  }); YSW*/
88    item.css({
89        position: 'absolute', top: shortest + 'px',
90        left: (shortestIndex * columnWidth + offset) + 'px',
91        opacity: 0
92    });
93    item.animate({  opacity: 1
94    }, 500);
95  
96
97      // Update column height.
98      heights[shortestIndex] = shortest + item.outerHeight() + this.wookmarkOptions.offset;
99      bottom = Math.max(bottom, heights[shortestIndex]);
100      
101      this.wookmarkColumns[shortestIndex].push(item);
102    }
103    
104    return bottom;
105  };
106  
107  /**
108   * This layout function only updates the vertical position of the 
109   * existing column assignments.
110   */
111  this.wookmarkLayoutColumns = function(columnWidth, offset) {
112    var heights = [];
113    while(heights.length < this.wookmarkColumns.length) {
114      heights.push(0);
115    }
116    
117    var i=0, length = this.wookmarkColumns.length, column;
118    var k=0, kLength, item;
119    var bottom = 0;
120    for(; i<length; i++) {
121      column = this.wookmarkColumns[i];
122      kLength = column.length;
123      for(k=0; k<kLength; k++) {
124        item = column[k];
125        item.css({
126          left: (i*columnWidth + offset)+'px',
127          top: heights[i]+'px'
128        });
129        heights[i] += item.outerHeight() + this.wookmarkOptions.offset;
130        
131        bottom = Math.max(bottom, heights[i]);
132      }
133    }
134    
135    return bottom;
136  };
137  
138  // Listen to resize event if requested.
139  this.wookmarkResizeTimer = null;
140  if(!this.wookmarkResizeMethod) {
141    this.wookmarkResizeMethod = null;
142  }
143  if(this.wookmarkOptions.autoResize) {
144    // This timer ensures that layout is not continuously called as window is being dragged.
145    this.wookmarkOnResize = function(event) {
146      if(this.wookmarkResizeTimer) {
147        clearTimeout(this.wookmarkResizeTimer);
148      }
149      this.wookmarkResizeTimer = setTimeout($.proxy(this.wookmarkLayout, this), this.wookmarkOptions.resizeDelay)
150    };
151    
152    // Bind event listener.
153    if(!this.wookmarkResizeMethod) {
154      this.wookmarkResizeMethod = $.proxy(this.wookmarkOnResize, this);
155    }
156    $(window).resize(this.wookmarkResizeMethod);
157  };
158  
159  /**
160   * Clear event listeners and time outs.
161   */
162  this.wookmarkClear = function() {
163    if(this.wookmarkResizeTimer) {
164      clearTimeout(this.wookmarkResizeTimer);
165      this.wookmarkResizeTimer = null;
166    }
167    if(this.wookmarkResizeMethod) {
168      $(window).unbind('resize', this.wookmarkResizeMethod);
169    }
170  };
171  
172  // Apply layout
173  this.wookmarkLayout();
174  
175  // Display items (if hidden).
176  this.show();
177};