|
5 | 5 | if(options === 'appended') { |
6 | 6 | options = $this.data('grid-options'); |
7 | 7 | var $lastRow = $this.children('.' + options.lastRowClass); |
8 | | - var items = $lastRow.nextAll().add($lastRow); |
| 8 | + var items = $lastRow.nextAll(options.itemSelector).add($lastRow); |
9 | 9 | layout(this, options, items); |
10 | 10 | } else { |
11 | 11 | options = $.extend( {}, $.fn.rowGrid.defaults, options ); |
|
32 | 32 | function layout(container, options, items) { |
33 | 33 | var rowWidth = 0, |
34 | 34 | rowElems = [], |
35 | | - items = items || container.querySelectorAll(options.itemSelector), |
| 35 | + items = Array.prototype.slice.call(items || container.querySelectorAll(options.itemSelector)), |
36 | 36 | itemsSize = items.length; |
| 37 | + // read |
| 38 | + var containerWidth = container.clientWidth-parseFloat($(container).css('padding-left'))-parseFloat($(container).css('padding-right')); |
| 39 | + var itemAttrs = []; |
| 40 | + var theImage; |
| 41 | + for(var i = 0; i < itemsSize; ++i) { |
| 42 | + theImage = items[i].getElementsByTagName('img')[0]; |
| 43 | + if (!theImage) { |
| 44 | + items.splice(i, 1); |
| 45 | + --i; |
| 46 | + --itemsSize; |
| 47 | + continue; |
| 48 | + } |
| 49 | + // get width and height via attribute or js value |
| 50 | + itemAttrs[i] = { |
| 51 | + width: parseInt(theImage.getAttribute('width')) || theImage.offsetWidth, |
| 52 | + height: parseInt(theImage.getAttribute('height')) || theImage.offsetHeight |
| 53 | + }; |
| 54 | + } |
| 55 | + itemsSize = items.length; |
37 | 56 |
|
| 57 | + // write |
38 | 58 | for(var index = 0; index < itemsSize; ++index) { |
39 | | - items[index].removeAttribute('style'); |
40 | 59 | if (items[index].classList) { |
41 | 60 | items[index].classList.remove(options.firstItemClass, options.lastRowClass); |
42 | 61 | } |
43 | 62 | else { |
44 | 63 | // IE <10 |
45 | 64 | items[index].className = items[index].className.replace(new RegExp('(^|\\b)' + options.firstItemClass + '|' + options.lastRowClass + '(\\b|$)', 'gi'), ' '); |
46 | 65 | } |
47 | | - } |
48 | 66 |
|
49 | | - // read |
50 | | - // only IE >8 |
51 | | - var containerWidth = parseInt(getComputedStyle(container).width); |
52 | | - var itemAttrs = []; |
53 | | - for(var i = 0; i < itemsSize; ++i) { |
54 | | - itemAttrs[i] = { |
55 | | - outerWidth: items[i].offsetWidth, |
56 | | - height: items[i].offsetHeight |
57 | | - }; |
58 | | - } |
59 | | - |
60 | | - // write |
61 | | - for(var index = 0; index < itemsSize; ++index) { |
62 | | - rowWidth += itemAttrs[index].outerWidth; |
| 67 | + rowWidth += itemAttrs[index].width; |
63 | 68 | rowElems.push(items[index]); |
64 | 69 |
|
65 | 70 | // check if it is the last element |
66 | 71 | if(index === itemsSize - 1) { |
67 | 72 | for(var rowElemIndex = 0; rowElemIndex<rowElems.length; rowElemIndex++) { |
68 | | - // if first element in row |
| 73 | + // if first element in row |
69 | 74 | if(rowElemIndex === 0) { |
70 | 75 | rowElems[rowElemIndex].className += ' ' + options.lastRowClass; |
71 | 76 | } |
72 | | - rowElems[rowElemIndex].style.marginRight = (rowElemIndex < rowElems.length - 1)?options.minMargin+'px' : 0; |
| 77 | + rowElems[rowElemIndex].style.cssText = 'margin-right:' + ((rowElemIndex < rowElems.length - 1)?options.minMargin+'px' : 0); |
73 | 78 | } |
74 | 79 | } |
75 | 80 |
|
|
90 | 95 | widthDiff = 0; |
91 | 96 | for(var rowElemIndex = 0; rowElemIndex<rowElems.length; rowElemIndex++) { |
92 | 97 | rowElem = rowElems[rowElemIndex]; |
93 | | - var rowElemWidth = itemAttrs[index+parseInt(rowElemIndex)-rowElems.length+1].outerWidth; |
| 98 | + var rowElemWidth = itemAttrs[index+parseInt(rowElemIndex)-rowElems.length+1].width; |
94 | 99 | var newWidth = rowElemWidth - (rowElemWidth / rowWidth) * diff; |
95 | 100 | var newHeight = Math.round(itemAttrs[index+parseInt(rowElemIndex)-rowElems.length+1].height * (newWidth / rowElemWidth)); |
96 | 101 | if (widthDiff + 1 - newWidth % 1 >= 0.5 ) { |
|
0 commit comments