我试图了解如何将组合过滤器与Jquery BBQ Hash History一起使用。
我想做的是让用户按徽标、身份或品牌进行过滤。如果用户单击徽标，我希望他们能够按“非营利、教育、零售”等进行子过滤。我知道组合过滤器在没有实现 jquery BBQ 代码的情况下工作正常，但我想两者都做。
$optionSets.find('.filter-main a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
}
changeSelectedLink( $this );
// get href attr, remove leading #
var href = $this.attr('href').replace( /^#/, '' ),
// convert href into object
// i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
option = $.deparam( href, true );
// apply new option to previous
$.extend( isotopeOptions, option );
// set hash, …我正在使用 wordpress 和 isotope 创建一个投资组合网站。出于某种原因，每次对同位素项目进行排序后，它们都会进行一次不和谐的跳跃。这是一个演示问题的jsfiddle：
http://jsfiddle.net/tovly/8k6hyyzL/
这是一个演示问题的视频：
https://drive.google.com/file/d/0B5OxMCWiLhrMcmZUYm56YkFzdGs/view?usp=sharing
该问题仅在第一次对每个图块进行排序时发生。我怎样才能阻止这种情况发生？这些是我的同位素设置：
$container.isotope({
itemSelector : '.item',
layoutMode : 'masonry',
masonry: {
isFitWidth: true,
columnWidth: 60,
gutter: 10
}
});
我正在使用 Isotope 的 vanilla JS 版本来创建一个过滤函数，如下所示
isotope.arrange({
filter: function(element) {
console.log(element)
但是，变量元素的返回值是 0，而不是像我本地计算机上那样的 HTMLElement。
事先记录 isotope.getItemElements() 时，它会返回所有项目，因此我知道它已正确实例化。
任何帮助将非常感激
测试用例： https: //codepen.io/matthewattanasio/pen/qBOjeMr
我一直在使用同位素来建立一个可过滤的出版物库,据我所知,除了firefox之外,它在所有浏览器中运行良好.
我在这里设置了一个jsfiddle(显然在firefox中查看它看起来不起作用!):http: //jsfiddle.net/bellamystudio/wfz5N/
在firebug中没有任何东西表明存在错误,并且同位素似乎在同位素网站(isotope.metafizzy.co)上对firefox工作正常,所以我想弄清楚我做错了什么!任何人都可以看到我的代码有问题吗？
任何帮助一如既往的赞赏!
按照有关无限滚动的说明，我能够从第2、3、4页等中隐藏新内容，直到完成加载然后进行动画处理。现在，我想达到相同的效果，但主要内容是首页。有什么帮助吗？我正在使用的代码：
<script>
$(function(){
var $container = $('#boxes');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.box'
});
});
</script>
<script>
$('#boxes').isotope({
// options
itemSelector : '.box',
layoutMode : 'masonry'
masonry : {
columnWidth : 325
},
});
</script>
<script>
$(function(){
var $container = $('#boxes');
$container.imagesLoaded(function(){
$container.isotope({
itemSelector: '.box'
});
});
$container.infinitescroll({
navSelector : '#navigation',
nextSelector : '#navigation a#next',
itemSelector : '.box',
loading: {
finishedMsg: 'no more pages to load.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},
function(newElements){
var $newElems = jQuery( newElements ).hide()
console.log('Elements …我有一个带有4个选项卡的bootstrap选项卡控件.我的同位素代码在第3个标签内.但是当我导航到该选项卡时,布局没有被使用(所有图像都在他们自己的行上,而不是在漂亮的平铺布局中).如果我调整页面大小,它将重组为正确的布局.
我在这里重新创建了这个问题.http://jsfiddle.net/Vc6Vk/
<div class="tab-pane" id="messages">
....isotope code here
</div>
如何使Isotope参与,以便当我导航到选项卡时,它已经格式化并正确显示？
我使用Isotope js为Bootstrap项目进行排序.排序时我遇到了问题.我用了
.col-md-4:nth-child(3n+2) {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
当我用同位素排序时,应用于3n+2位置的CSS 是变化的.(因为Isotope将CSS作为position absolute).在排序和正常情况下,我希望每行中的两个项目左右边框.指导我解决这个问题.
在jsfiddle:http://jsfiddle.net/tamilcselvan/v0k608x1/
$(function () {
$container = $('.row');
$container.isotope({
itemSelector: '.col-md-4',
layoutMode: 'fitRows',
getSortData: {
name: '.name'
}
});
$('button').click(function () {
$container.isotope({
sortBy: 'name'
});
});
});.col-md-4:nth-child(3n+2) {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.col-md-4:nth-child(3n+1) {
padding-left: 0;
}
.col-md-4:nth-child(3n+3) {
padding-right: 0;
}
.col-md-4 {
text-align:center;
margin: 0 0 1em 0;
} …