我想知道我是否可以就这个画廊获得一些建议。
使用此过滤库我得到了奇怪的结果。在这里看画廊。
http://chris.proitservicesllc.com/gallery.php
在页面加载一切都很好，但当我切换到另一个类别时，有一个小高度问题。然后，当我切换回ALL类别时，存在一个主要的高度问题。
我意识到高度问题是由于在重新定位自己时所有图像都对齐到页面的左下方，但不确定如何解决问题。
希望有人可以帮我解决这个问题。
仅供参考，如果你在firebug中检查这一点，你会发现UL ID阶段正在获得一个自动生成的element.height样式。它来自quicksand js文件，见下文。
这是html代码。
<!--======START GALLERY======-->
<div class="row">
<div class="column grid_12">
<div class="row">
<div class="column grid_12">
<!-- start Filter categories -->
<ul id="filter">
<li class="active"><a href="#" class="all">All</a></li>
<li><a href="#" class="treeremoval">Tree Removal</a></li>
<li><a href="#" class="treetrimming">Tree Trimming</a></li>
<li><a href="#" class="treebracing">Tree Bracing</a></li>
<li><a href="#" class="stumpgrinding">Stump Grinding</a></li>
<li><a href="#" class="firewood">Firewood</a></li>
<li><a href="#" class="cleanup">Cleanup</a></li>
</ul>
<!-- End Filter categories -->
</div>
</div>
<!-- Divider -->
<div class="row">
<div class="column grid_12">
<div class="clear"></div>
<div class="divider spacer5"></div>
</div>
</div>
<!-- End divider -->
<div class="row">
<ul id="stage" class="gallery portfolio-4column">
<li data-id="id-12" data-type="treeremoval">
<div class="column grid_3">
<a class="fancybox" rel="gallery1" href="images/gallery/1.jpg" title="Tree Bracing Lake of the Ozarks">
<img src="images/gallery/1.jpg" alt="Tree Bracing Lake of the Ozarks" class="max-img-border"></a>
<h5>Lake of the Ozarks Tree Removal </h5>
</div>
</li>
<li data-id="id-11" data-type="treetrimming">
<div class="column grid_3">
<a class="fancybox" rel="gallery1" href="images/gallery/2.jpg" title="Osage Beach Tree Trimming">
<img src="images/gallery/2.jpg" alt="Osage Beach Tree Trimming" class="max-img-border"></a>
<h5>Lake of the Ozarks Tree Removal</h5>
</div>
</li>
<li data-id="id-10" data-type="treebracing">
<div class="column grid_3">
<a class="fancybox" rel="gallery1" href="images/gallery/3.jpg" title="Camdenton Tree Removal">
<img src="images/gallery/3.jpg" alt="Camdenton Tree Removal" class="max-img-border"></a>
<h5>Lake of the Ozarks Tree Removal</h5>
</div>
</li>
<li data-id="id-9" data-type="stumpgrinding">
<div class="column grid_3">
<a class="fancybox" rel="gallery1" href="images/gallery/4.jpg" title="Residential Tree Removal">
<img src="images/gallery/4.jpg" alt="Residential Tree Removal" class="max-img-border"></a>
<h5>Lake of the Ozarks Tree Removal</h5>
</div>
</li>
etc...
</ul><!--END LIST-->
</div>
</div>
</div>
</div>
<!--======END GALLERY======-->
</div>
</div><!--End Row-->
以下是与图库相关联的两个脚本。
quicksand.js 如果我将adjustHeight改为false，则在脚本的顶部修复高度问题，但会在动画中创建跳转/弹出，页脚会跳到下方然后图像又回落到原位。我也许可以忍受这种情况，但是当它发生时它看起来真的很麻烦。这告诉我，也可能存在某种z-index问题......？
/*
Quicksand 1.2.2
Reorder and filter items with a nice shuffling animation.
Copyright (c) 2010 Jacek Galanciak (razorjack.net) and agilope.com
Big thanks for Piotr Petrus (riddle.pl) for deep code review and wonderful docs & demos.
Dual licensed under the MIT and GPL version 2 licenses.
http://github.com/jquery/jquery/blob/master/MIT-LICENSE.txt
http://github.com/jquery/jquery/blob/master/GPL-LICENSE.txt
Project site: http://razorjack.net/quicksand
Github site: http://github.com/razorjack/quicksand
*/
(function ($) {
$.fn.quicksand = function (collection, customOptions) {
var options = {
duration: 750,
easing: 'swing',
attribute: 'data-id', // attribute to recognize same items within source and dest
adjustHeight: 'auto', // 'dynamic' animates height during shuffling (slow), 'auto' adjusts it before or after the animation, false leaves height constant
useScaling: true, // disable it if you're not using scaling effect or want to improve performance
enhancement: function(c) {}, // Visual enhacement (eg. font replacement) function for cloned elements
selector: '> *',
dx: 0,
dy: 0
};
$.extend(options, customOptions);
if ($.browser.msie || (typeof($.fn.scale) == 'undefined')) {
// Got IE and want scaling effect? Kiss my ass.
options.useScaling = false;
}
var callbackFunction;
if (typeof(arguments[1]) == 'function') {
var callbackFunction = arguments[1];
} else if (typeof(arguments[2] == 'function')) {
var callbackFunction = arguments[2];
}
return this.each(function (i) {
var val;
var animationQueue = []; // used to store all the animation params before starting the animation; solves initial animation slowdowns
var $collection = $(collection).clone(); // destination (target) collection
var $sourceParent = $(this); // source, the visible container of source collection
var sourceHeight = $(this).css('height'); // used to keep height and document flow during the animation
var destHeight;
var adjustHeightOnCallback = false;
var offset = $($sourceParent).offset(); // offset of visible container, used in animation calculations
var offsets = []; // coordinates of every source collection item
var $source = $(this).find(options.selector); // source collection items
// Replace the collection and quit if IE6
if ($.browser.msie && $.browser.version.substr(0,1)<7) {
$sourceParent.html('').append($collection);
return;
}
// Gets called when any animation is finished
var postCallbackPerformed = 0; // prevents the function from being called more than one time
var postCallback = function () {
if (!postCallbackPerformed) {
postCallbackPerformed = 1;
// hack:
// used to be: $sourceParent.html($dest.html()); // put target HTML into visible source container
// but new webkit builds cause flickering when replacing the collections
$toDelete = $sourceParent.find('> *');
$sourceParent.prepend($dest.find('> *'));
$toDelete.remove();
if (adjustHeightOnCallback) {
$sourceParent.css('height', destHeight);
}
options.enhancement($sourceParent); // Perform custom visual enhancements on a newly replaced collection
if (typeof callbackFunction == 'function') {
callbackFunction.call(this);
}
}
};
// Position: relative situations
var $correctionParent = $sourceParent.offsetParent();
var correctionOffset = $correctionParent.offset();
if ($correctionParent.css('position') == 'relative') {
if ($correctionParent.get(0).nodeName.toLowerCase() == 'body') {
} else {
correctionOffset.top += (parseFloat($correctionParent.css('border-top-width')) || 0);
correctionOffset.left +=( parseFloat($correctionParent.css('border-left-width')) || 0);
}
} else {
correctionOffset.top -= (parseFloat($correctionParent.css('border-top-width')) || 0);
correctionOffset.left -= (parseFloat($correctionParent.css('border-left-width')) || 0);
correctionOffset.top -= (parseFloat($correctionParent.css('margin-top')) || 0);
correctionOffset.left -= (parseFloat($correctionParent.css('margin-left')) || 0);
}
// perform custom corrections from options (use when Quicksand fails to detect proper correction)
if (isNaN(correctionOffset.left)) {
correctionOffset.left = 0;
}
if (isNaN(correctionOffset.top)) {
correctionOffset.top = 0;
}
correctionOffset.left -= options.dx;
correctionOffset.top -= options.dy;
// keeps nodes after source container, holding their position
$sourceParent.css('height', $(this).height());
// get positions of source collections
$source.each(function (i) {
offsets[i] = $(this).offset();
});
// stops previous animations on source container
$(this).stop();
var dx = 0; var dy = 0;
$source.each(function (i) {
$(this).stop(); // stop animation of collection items
var rawObj = $(this).get(0);
if (rawObj.style.position == 'absolute') {
dx = -options.dx;
dy = -options.dy;
} else {
dx = options.dx;
dy = options.dy;
}
rawObj.style.position = 'absolute';
rawObj.style.margin = '0';
rawObj.style.top = (offsets[i].top - parseFloat(rawObj.style.marginTop) - correctionOffset.top + dy) + 'px';
rawObj.style.left = (offsets[i].left - parseFloat(rawObj.style.marginLeft) - correctionOffset.left + dx) + 'px';
});
// create temporary container with destination collection
var $dest = $($sourceParent).clone();
var rawDest = $dest.get(0);
rawDest.innerHTML = '';
rawDest.setAttribute('id', '');
rawDest.style.height = 'auto';
rawDest.style.width = $sourceParent.width() + 'px';
$dest.append($collection);
// insert node into HTML
// Note that the node is under visible source container in the exactly same position
// The browser render all the items without showing them (opacity: 0.0)
// No offset calculations are needed, the browser just extracts position from underlayered destination items
// and sets animation to destination positions.
$dest.insertBefore($sourceParent);
$dest.css('opacity', 0.0);
rawDest.style.zIndex = -1;
rawDest.style.margin = '0';
rawDest.style.position = 'absolute';
rawDest.style.top = offset.top - correctionOffset.top + 'px';
rawDest.style.left = offset.left - correctionOffset.left + 'px';
if (options.adjustHeight === 'dynamic') {
// If destination container has different height than source container
// the height can be animated, adjusting it to destination height
$sourceParent.animate({height: $dest.height()}, options.duration, options.easing);
} else if (options.adjustHeight === 'auto') {
destHeight = $dest.height();
if (parseFloat(sourceHeight) < parseFloat(destHeight)) {
// Adjust the height now so that the items don't move out of the container
$sourceParent.css('height', destHeight);
} else {
// Adjust later, on callback
adjustHeightOnCallback = true;
}
}
// Now it's time to do shuffling animation
// First of all, we need to identify same elements within source and destination collections
$source.each(function (i) {
var destElement = [];
if (typeof(options.attribute) == 'function') {
val = options.attribute($(this));
$collection.each(function() {
if (options.attribute(this) == val) {
destElement = $(this);
return false;
}
});
} else {
destElement = $collection.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
}
if (destElement.length) {
// The item is both in source and destination collections
// It it's under different position, let's move it
if (!options.useScaling) {
animationQueue.push(
{
element: $(this),
animation:
{top: destElement.offset().top - correctionOffset.top,
left: destElement.offset().left - correctionOffset.left,
opacity: 1.0
}
});
} else {
animationQueue.push({
element: $(this),
animation: {top: destElement.offset().top - correctionOffset.top,
left: destElement.offset().left - correctionOffset.left,
opacity: 1.0,
scale: '1.0'
}
});
}
} else {
// The item from source collection is not present in destination collections
// Let's remove it
if (!options.useScaling) {
animationQueue.push({element: $(this),
animation: {opacity: '0.0'}});
} else {
animationQueue.push({element: $(this), animation: {opacity: '0.0',
scale: '0.0'}});
}
}
});
$collection.each(function (i) {
// Grab all items from target collection not present in visible source collection
var sourceElement = [];
var destElement = [];
if (typeof(options.attribute) == 'function') {
val = options.attribute($(this));
$source.each(function() {
if (options.attribute(this) == val) {
sourceElement = $(this);
return false;
}
});
$collection.each(function() {
if (options.attribute(this) == val) {
destElement = $(this);
return false;
}
});
} else {
sourceElement = $source.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
destElement = $collection.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
}
var animationOptions;
if (sourceElement.length === 0) {
// No such element in source collection...
if (!options.useScaling) {
animationOptions = {
opacity: '1.0'
};
} else {
animationOptions = {
opacity: '1.0',
scale: '1.0'
};
}
// Let's create it
d = destElement.clone();
var rawDestElement = d.get(0);
rawDestElement.style.position = 'absolute';
rawDestElement.style.margin = '0';
rawDestElement.style.top = destElement.offset().top - correctionOffset.top + 'px';
rawDestElement.style.left = destElement.offset().left - correctionOffset.left + 'px';
d.css('opacity', 0.0); // IE
if (options.useScaling) {
d.css('transform', 'scale(0.0)');
}
d.appendTo($sourceParent);
animationQueue.push({element: $(d),
animation: animationOptions});
}
});
$dest.remove();
options.enhancement($sourceParent); // Perform custom visual enhancements during the animation
for (i = 0; i < animationQueue.length; i++) {
animationQueue[i].element.animate(animationQueue[i].animation, options.duration, options.easing, postCallback);
}
});
};
})(jQuery);
最后一个脚本是过滤器设置。
filter_settings.js
$(document).ready(function(){
/*********************
quicksand
*********************/
$clientsHolder = $('#stage');
$clientsClone = $clientsHolder.clone();
$('#filter a').click(function(e) {
e.preventDefault();
$filterClass = $(this).attr('class');
$('#filter li').removeClass('active');
$(this).parent().addClass('active');
if($filterClass == 'all'){
$filters = $clientsClone.find('li');
} else {
$filters = $clientsClone.find('li[data-type~='+ $filterClass +']');
}
$clientsHolder.quicksand( $filters, {
duration: 1000,
easing: 'easeInOutQuad'
}, function(){
});
});
});
一如往常，对此的任何帮助都将非常感激，因为我一直试图解决这个问题一周。
如果您需要我的信息，请告诉我，我很乐意提供。
谢谢！
答案 0 :(得分：0)