我想知道我是否可以在这里得到一些关于我的画廊的建议。
使用这个过滤库我得到了奇怪的结果。在此处查看画廊。
http://chris.proitservicesllc.com/gallery.php
在页面加载时一切都很好，但是当我切换到不同的类别时，会出现一个小的高度问题。然后，当我切换回 ALL 类别时，出现了一个主要的高度问题。
我意识到高度问题是由于所有图像在重新定位时都在页面左下方对齐，但不知道如何解决这个问题。
希望有人可以帮助我解决这个问题。
仅供参考，如果您在 firebug 中查看此内容，您会看到 UL ID 阶段正在添加一个自动生成的 element.height 样式。它来自流沙 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(){
});
});
});
与往常一样，我们将不胜感激任何帮助，因为我已经尝试了一周的时间来解决这个问题。
如果您需要我的更多信息，请告诉我，我很乐意提供。
谢谢你！