同位素过滤-在页面加载时加载来自每个类别的特定数字
同位素过滤是一种在网页上实现动态内容加载的技术，它允许在页面加载时根据特定条件加载内容。以下是一个简单的示例，展示如何在页面加载时加载来自每个类别的特定数字。
HTML结构
首先，我们需要一个基本的HTML结构来显示类别和数字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Isotope Filtering</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="filters">
<button class="filter" data-filter="all">All</button>
<button class="filter" data-filter="category1">Category 1</button>
<button class="filter" data-filter="category2">Category 2</button>
<button class="filter" data-filter="category3">Category 3</button>
</div>
<div class="items">
<!-- Items will be loaded here -->
</div>
<script src="script.js"></script>
</body>
</html>CSS样式
接下来，我们需要一些CSS来美化页面和设置同位素过滤的样式。
/* styles.css */
body {
font-family: Arial, sans-serif;
}
.filters {
margin-bottom: 20px;
}
.filter {
padding: 10px 20px;
margin-right: 10px;
cursor: pointer;
}
.items {
display: flex;
flex-wrap: wrap;
}
.item {
width: 100px;
height: 100px;
margin: 5px;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}JavaScript逻辑
最后，我们需要JavaScript来处理过滤逻辑并在页面加载时加载特定数字。
// script.js
document.addEventListener('DOMContentLoaded', function() {
const itemsContainer = document.querySelector('.items');
const filters = document.querySelectorAll('.filter');
// Sample data
const data = {
category1: [1, 2, 3],
category2: [4, 5, 6],
category3: [7, 8, 9]
};
// Function to render items
function renderItems(category) {
itemsContainer.innerHTML = ''; // Clear previous items
const numbers = data[category] || [];
numbers.forEach(number => {
const item = document.createElement('div');
item.classList.add('item');
item.textContent = number;
itemsContainer.appendChild(item);
});
}
// Event listeners for filters
filters.forEach(filter => {
filter.addEventListener('click', function() {
const category = this.getAttribute('data-filter');
renderItems(category);
});
});
// Load initial items (e.g., category1)
renderItems('category1');
});解释
- HTML结构：我们创建了一个包含过滤按钮和项目容器的简单页面。
- CSS样式：我们设置了基本的样式来美化页面和设置同位素过滤的布局。
- JavaScript逻辑：
- 我们定义了一个包含类别和数字的样本数据对象。
- 我们创建了一个函数
renderItems来根据类别渲染项目。 - 我们为每个过滤按钮添加了事件监听器，当按钮被点击时，调用
renderItems函数来更新项目容器。 - 我们在页面加载时调用
renderItems函数来加载初始项目（例如，类别1的项目）。
通过这种方式，我们可以在页面加载时加载来自每个类别的特定数字，并根据用户的过滤选择动态更新内容。
相关·内容
1回答
我正在使用Jquery同位素，在我的主页上过滤产品。
在我的页面上：
我对产品有不同的分类。问题是，如果你点击一个不同于第一个类别的类别，然后点击一个产品。当你点击后退按钮时，它不会识别你所在的类别。
这是一种让它在你返回时识别你所在类别的方法吗？
浏览 0提问于2013-03-06得票数 1
1回答
我用同位素过滤网页上的不同内容。现在，我在umbraco中有一个展示页面，我有两种数据类型，名为images和videos
在其他使用同位素过滤内容的页面上，我使用页面类型这样做：
$('#filterNews').click(function () {
$('.isotope').isotope({ filter: '.NewsItem', layoutMode: 'masonry' });
$('.newsfilters .btn').removeClass('active');
浏览 0提问于2015-02-13得票数 1
1回答
有没有人对同位素jquery插件中的“selected”类有问题。
当页面第一次加载时，我试图从列表中排除某些div，然而，尽管“数据选项-值”中有“class=selected”同位素，但它仍然输出所有的div，而不仅仅是我想要的。
以下是我所拥有的：
<li><a href="#filter" data-option-value="*:not(.Blurb)" class="selected">Everything</a></li>
我知道可能性很大，但还有谁有这个问题吗?如果是的话，你是怎么解
浏览 4提问于2013-11-15得票数 0
回答已采纳
1回答
我对及其分类能力感到惊讶。但观察到大多数其他布局使用同位素，我结束了，在那里没有分页的任何一个。所以，我想知道，同位素是否支持分页数据？
假设我有数据和它们的计数：
网页设计(200)
网络开发(190)
应用程序开发(5)
数据的总数是300，是一个组合的混合物。在不分页的情况下，页面的加载时间将溢出。每页分页10项.
那会发生什么呢？
点击“网页设计”链接，它会对网页设计类别中的10个数据进行排序(+分页为20页(20x10=200))，或者例如，仅从该页面的分页项中选择3个数据(其中其他7个数据属于其他两个cat的-- WDes 3、WDev 6、Apps 1(+页面
浏览 3提问于2014-10-28得票数 0
我在使用反应同位素布局库(打字稿)。我能够设法在我的页面中过滤工作。但我不知道如何返回过滤的项目计数。
在页面加载时，我正在初始化同位素。
useEffect(() => {
isotope.current = new Isotope(".iso-filter-container", {
itemSelector: ".iso-filter-item",
masonry: {
columnWidth: 50,
gutter: 12
} ,
})
浏览 7提问于2021-11-19得票数 0
回答已采纳
我试图从一个完全不同的页面过滤到我的同位素所在的位置。
目前，我正在成功地调用同位素：
$(function() {
// cache container
var $container = $('.isotope-container');
var $defaultfilter = $('.feature-this');
$('.isotope-container').isotope({
filter: '.feature-this',
masonry: { columnWi
浏览 4提问于2012-09-26得票数 2
回答已采纳
<div class="option-combo department">
<span class="label_menu">Department:</span>
<ul id="filters" class="option-set clearfix" data-option-key="filter">
<li class="department-button"><a href="#&#
浏览 0提问于2013-12-20得票数 0
1回答
这是一个相当复杂的修改。我用同位素建立了一个网格系统。客户端希望这个网格在用户每次访问页面时都是随机的。这很容易使用同位素设置，只需添加sortBy：‘sortBy’。
然而，同位素中的第一项有一类“特色”。这个功能类激活了一个更宽的网格元素和一些信息供用户点击，因此这将始终是我的网格中的第一项。
现在，我需要做的是将随机序列中的第一个元素设置为每次“特色”。因此，每次用户访问页面时，特色网格项目都会有所不同。目前，因为我已经对类特性进行了硬编码，所以这只是随机地放在网格上。
有没有办法给随机序列中的第一个元素一个类？这是我的代码：
<script>
var
浏览 1提问于2013-03-12得票数 0
1回答
我正在帮助一个客户端使用Wordpress模板，该模板在砖石布局中使用Isotope.js。
Isotope.min.js：或源代码在这里：
基本模板：
问题是，他们有数以百计的项目，将需要在该投资组合，所以显示他们成为一个问题。很明显，我们不想让所有的人同时装载。即使集成了某种形式的懒虫，它仍将是一个巨大的尺寸。
问题：是否可以改变同位素以包括某种分页？也许“点击这里加载更多”div沿着最底层，然后加载下一批项目？或者更好的是--在主循环中，每20个块只会说“加载更多的项”，然后单击它将前19个项替换为下面的19个项(19个项+加载更多的块，这样总有一个20的网格)？
基本上，我只是想找出最
浏览 1提问于2013-12-11得票数 3
1回答
我需要开始同位素，只显示的div，有类“戴斯塔克”。
目前，我的脚本在加载时会显示从CMS加载的所有已加载项，但是如果我单击filter按钮：
<li data-filter=".destaque" class="active">Todos</li>
它会显示我想要的物品。
--
如何才能开始同位素分解与这类div呢？
浏览 2提问于2017-01-02得票数 0
回答已采纳
2回答
我试图从url链接中过滤我的同位素页面，搜索并尝试实现在这里找到的例子，但是没有结果。
这是同位素页面：
下面是我要过滤的页面：
我已经尝试了所有的数据过滤器，#和？但似乎没有什么能过滤结果。
有什么想法吗？
浏览 5提问于2016-03-15得票数 0
1回答
元素类开头的同位素过滤
、、、、
我正在使用同位素过滤器按类别为Wordpress贴子。通常，posts是过滤类别的子类，因此它们的类在类的名称中包含父类别的名称，但不等于这个名称。例如，过滤器是Facebook，Twitter，Youtube。它的类名是facebook页面或twitter信息图形。因此，这些帖子不会被过滤，除非父类别也被选中。我现在使用的代码如下( jQuery非冲突模式)：
var $jcontainer = $j('#portfolio-list');
$jcontainer.imagesLoaded( function() {
// initialize isotope
$jconta
浏览 1提问于2014-02-25得票数 1
回答已采纳
1回答
我在页面加载中隐藏同位素元素时遇到问题。我遵循了给出的解释。然而，虽然我想要隐藏的元素没有显示(在css中使用"opacity:0“)，但它留下了一个空白。
你可以在上看到它。它是网格中的第一项。
如果您将鼠标悬停在顶部菜单中的"by expertise“项上，然后单击"Architecture”，它就会很好地出现。
我正在使用别人的Wordpress主题，我正在改编，但我不明白为什么要留下空格。
我需要隐藏第一个项目，直到过滤器被激活。
如果有任何帮助，我将不胜感激。
本
浏览 2提问于2013-03-22得票数 2
回答已采纳
我正在使用DIVs创建一个水平布局，将100%高度的DIV彼此对齐，并将每个jQuery中的图像垂直居中。因此，我像这样调用Isotope，在Chrome (本地)中一切正常：
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector : '.itemwrap',
layoutMode: 'horizontal',
horizontal: {
vertic
浏览 11提问于2014-04-30得票数 6
抬头了！
在同位素的GitHub回购上有一个未决的GitHub，如果您对此有兴趣查看官方文档和演示(如何将同位素、无限滚动、过滤和排序结合起来)，您应该添加一个"“反应。它是由同位素的创建者为评估兴趣而开设的。如果有兴趣，请投！
**TL;DR:为了帮助获取官方文档和演示，
试图拼凑一个可过滤的布局使用和保罗爱尔兰(可悲地没有维护)的。
过滤在某种程度上起作用。最初，它过滤页面1的内容。为了过滤未在第1页上的项目，我需要向下滚动(我想这会带来浏览器内存中的元素，从而使过滤脚本可用吗？)
通过一组用于初始页面内容的复选框(即:第1页上的内容)。
问题1:如何使筛选器对所有页面项都有效？
浏览 4提问于2014-05-27得票数 48
这是关于过滤jQuery同位素项选择器的输入复选框。
参考演示，页面加载时复选框处于选中状态。然而，当用户取消选中所有内容时，我偶然发现了这个问题，它将只显示所有的.items，而不是一个空的容器。
$checkboxes.change(function(){
var filters = [];
// get checked checkboxes values
$checkboxes.filter(':checked').each(function(){
filters.push( this.value );
浏览 0提问于2013-01-10得票数 6
回答已采纳
我有多个类别，其中有图像，同位素是工作良好过滤所有类别，但有一个问题，当有类别包含特殊字符，如“个人电脑和笔记本”。如果我单击该类别的名称，它不会被同位素过滤，而在Chrome控制台中，我会得到以下错误：
未识别错误:语法错误，未识别表达式：.PC &笔记本
这是我的工作代码：
$(window).load(function () {
var $container = $('#tabpersonalcloset');
$container.isotope({
filter: '*',
animatio
浏览 3提问于2015-05-06得票数 0
同位素插件有个小问题。当我的网页被加载，同位素将显示所有的元素。我想让它只显示一个类别。我怎样才能做到这一点？
提前感谢您的帮助！
浏览 1提问于2013-05-21得票数 2
1回答
是否有可能在(jQuery)同位素过滤内容时避免隐藏项目？
我想要的解决方案是将所有元素保存在同位素容器中，同时在单击一个按钮后以某种方式标记几个元素--重要的是始终显示容器中的所有元素。
我知道同位素提供排序，但我不确定排序是否可行。
浏览 4提问于2014-04-27得票数 0
回答已采纳
1回答
我想在页面加载动画，就像在(点击观看)。使用同位素插件
var $container = $('.masonry-container').isotope({
itemSelector: '.masonry',
masonry: {
percentPosition: true,
columnWidth: '.masonry'
},
transitionDuration: '2.4s'
});
// reveal all items after init
var iso = $container.dat
浏览 1提问于2016-10-31得票数 0
1回答
我正在为威斯康星队建立一个新的名人堂。我的测试版可以在上看到
我的问题是，当使用搜索功能时，我如何将可见元素放在顶部。它显示了正确的元素，并使用display:none隐藏其他元素。但是，在搜索和显示之后，它不会重新定位元素:无元素仍然占用空间。
它与同位素使用的"-webkit-transform“风格有关。我该如何改变这一点，或者是否有更好的方法来使用同位素进行搜索？
我正在使用进行搜索，因为我想不出一个单独使用同位素的方法。
浏览 5提问于2011-07-19得票数 1
回答已采纳
1回答
我试图将同位素与WordPress集成起来，以创建一个可过滤的组合网格。它显示项目类别(我的自定义post类型和分类法)，但在单击按钮时没有显示来自该类别的帖子。
有什么想法吗？
jQuery(document).ready(function($){
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// init Isotope
var $grid = $('.grid').isotope({
// options
itemSelector: '.
浏览 0提问于2020-10-25得票数 0
我正在与jQuery同位素插件一起工作，并希望只显示一个特定的组时，页面加载的项目。当前所有项目都在显示：
例如，在上面的链接中，有没有一种方法可以加载显示“壁画”的页面？
谢谢。
浏览 0提问于2012-01-06得票数 5
我正在为自己创建一个投资组合网站。我使用同位素JQuery图像演示作为页面上同位素布局的模板，但我想添加一些其他演示页面中包含的过滤功能。我尝试简单地从具有过滤选项的演示中复制选项代码，但它不起作用。
浏览 2提问于2012-05-10得票数 1
我已经做了同位素过滤，按类别过滤帖子。但我也需要根据同一页面上的标签来过滤帖子。我对wordpress还是个新手，所以我真的希望有人能给我一些建议。非常感谢!
浏览 1提问于2015-02-09得票数 0
1回答
我一直在使用同位素插件，我认为它很棒！然而，它只是基于关键字。如果我想做一些数学过滤，比如添加一个类：..age 35。然后，在我的过滤器中，我想选择例如年龄> 30。像这样的事情可能吗?或者这不就是同位素设计的目的吗？我一直在试着找一些关于“数字过滤”的用法，但是我什么也找不到。
浏览 0提问于2013-01-10得票数 1
回答已采纳
2回答
多滤池同位素
、、、
我目前正在开发一个具有过滤效果的页面，它使用的是jQuery插件，同位素。。目前，它只接受一个活动过滤器，并作为一个选项卡。
我试图找到任何解决方案，这样它就可以切换多个过滤器，但仍然具有类似的同位素效应。我对实现选项卡筛选器的参考是使用本页的jQuery代码。
任何使用插件代码或任何替代插件来实现这一目标的建议都会有很大的帮助。
浏览 2提问于2015-03-03得票数 0
回答已采纳
1回答
我的客户坚持让我使用我从CodeCanyon购买的一个名为“社交墙流”的插件。它使用同位素创建一个动态的互动墙与来自几个社交媒体网站的帖子。
为了包含这个插件，我加载了所有所需的文件(在jquery &after之后)，并创建了以下指令来加载它：
angular.module('app').directive('socialWall', function($timeout){
return {
restrict: 'E',
replace: true,
link: function(
浏览 3提问于2014-08-30得票数 0
2回答
我用jQuery同位素和各种过滤器创建了一个页面。以下是简化的JSFiddle：
如您所见，有3个过滤器:2个复选框和1个范围滑块。如果单独使用，所有过滤器都能很好地工作，但当我将它们组合使用时，它只工作最后一次使用的过滤器。这是因为我在使用范围滑块时使用“. classes”类，在使用复选框时使用其他类。
距离滑翔机：
$("#range").ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 0,
max: 150,
from:
浏览 3提问于2016-02-15得票数 1
回答已采纳
1回答
我使用排序/过滤jQuery插件和jQuery $.ajax()动态地将一些新元素加载到需要使用同位素排序的页面中。为了执行排序，该库似乎设置了所有具有绝对位置和固定(左、顶)位置的新排序元素。
问题是，当您首次使用clear缓存加载元素的时，绝对网格中的元素位置是不正确的(它们是重叠的)。这是由同位素初始化引起的。我(缺乏经验的)猜测是，当同位素开始计算元素的未来位置时，所有新的DOM元素都没有被完全加载，而不精确的位置就在这里。如果我再次执行完全相同的ajax请求，它将设法正确地计算位置。
编辑#1 ajax reuqest
var $isocont = $('#page-cont
浏览 3提问于2014-08-26得票数 0
1回答
我有一个同位素的问题，我已经切换到URL哈希过滤方法，因为我需要能够发送访问与过滤器已经激活的页面。
当我正常使用过滤器时--即页面加载未被过滤，单击一个按钮会激活一个过滤器，一切都按预期工作。
当使用URL中的散列从另一个页面到达时，它确实激活了筛选，但它没有正确地隐藏其余的项-相反，它们都是在0,0绝对而不是隐藏的情况下被打包起来的。只有过滤过的项目布局正确，就像这样(经过适当过滤的项目为了一定程度的隐私已经模糊了)：
这是我已经拥有的代码：
<script>
(function( $ ){
function getHashFilter() {
va
浏览 3提问于2015-09-22得票数 0
回答已采纳
1回答
我有一个WordPress插件，它使用同位素数据过滤器对菜单项进行排序，但是在页面加载时，项目没有分类。我将以下函数添加到我的functions.php中：
function add_custom_script(){
?>
<script>
(function($){
$(window).load(function() {
$('a[data-filter=".sparmenue"]').trigger('click');
});
})(jQuery);
</script>
<?
浏览 3提问于2015-11-07得票数 0
2回答
目标
在加载DOM/同位素时显示加载gif。
问题所在
当有人访问我的应用程序时，就有可能在屏幕上看到同位素/DOM结构。我的意思是，这是有可能看到的元素组织-这是非常不专业和丑陋的。
我的代码
同位素(jQuery) -窗口加载时加载它：
jQuery("ul.products-list").isotope({
itemSelector: "li",
masonry: {
gutterWidth: 15
}
});
我所拥有的
没什么。我甚至不知道从哪里开始。
提前谢谢。
浏览 1提问于2013-06-06得票数 1
回答已采纳
1回答
我对Orchard中的Projections模块有以下问题：
我有一些带有主要类别的页面，当打开这些页面时，可以查询数据库(而不是Orchard数据库，它来自单独的应用程序)，以查找它的子类别以及这些子类别中的项目。
我有一个投影，它在一个小部件中显示主要类别的标题，以便于导航。然而，页面加载时间猛增，因为即使在投影中，它也会尝试加载每个主要类别作为一个整体，从而导致对第二个数据库的指数级查询和超过30秒的加载时间。
Projections模块有没有可能只查询标题部分(可能还有任何自定义绑定)，而忽略执行这些查询的部分？
提前谢谢。
编辑
我们使用了Mini Profiler，结果如下：
浏览 2提问于2013-05-10得票数 0
回答已采纳
3回答
我正在尝试创建一个具有同位素的非对称网格可过滤网格，其中不对称意味着每一列都有不同的边值-最高值：
.active:nth-child(3n+1) .tile_inner {margin-top: 280px;}
.active:nth-child(3n+2) .tile_inner {margin-top: 140px;}
.active:nth-child(3n+3) .tile_inner {margin-top: 0;}
这样，列就会稍微移位，就像你在我做的这个Jsfiddle中看到的：
这种样式不是应用于瓷砖本身(它将螺旋同位素计算)，而是应用于其内部的子元素。
现在，加载页面
浏览 5提问于2015-10-27得票数 2
回答已采纳
尽管所有的文档都说同位素不应该在页面加载时运行动画，但我的页面似乎每次都这样做。
它被设置为使用CSS作为动画引擎，所以我看不到在运行时禁用它或更改持续时间的方法。
我正在使用来自同位素演示的复制和粘贴代码运行代码(尽管类名略有修改)，但仍然没有joy。请参阅下面的代码片段：
$(document).ready(function ()
{
// Isotope Filtering
var $container = $('#portfolioItems');
$container.isotope({
// options...
})
浏览 1提问于2013-09-15得票数 1
回答已采纳
1回答
我用同位素来设计一个页面上的一些区块。我的页面HTML结构可以简化如下：
<nav>
<a href="/page1.htm">Page 1</a>
<a href="/page1.htm">Page 1</a>
<a href="/page1.htm">Page 1</a>
</nav>
<div class="main-content-container">
<div class=&
浏览 2提问于2014-10-02得票数 3
回答已采纳
2回答
我做了一个网站与一个形象，谁是能够被jQuery同位素过滤。您可以单击缩略图，然后使用fancybox插件在图像之间循环：
现在的问题是，当Imagegallery被过滤时，fancybox插件仍然循环通过所有的图像。即使是那些在应用过滤器时没有出现的人。
我不知道我该怎么解决这个问题。
Fancybox决定与rel="gallery"建立一个画廊。同位素决定了css类的过滤效果。因此，如果我将过滤css类添加到rel=""标签(同位素过滤类是由cms生成的)，当所有内容都显示时，我不再能够循环浏览所有图像。
我真的搞不懂这件事。你知道怎么做吗？
浏览 1提问于2013-01-19得票数 1
回答已采纳
好吧，这让这个棱角分明的新手多了些白发：
我的常规同位素外部javascript初始化像正常一样开始：
$(document).ready(function() {
// ISOTOPE INITIALISATON AND STUFF HERE
而且在没有角度的情况下，一切都很好。现在，由于我的同位素项在一个单独的portfolio.html页面中，该页面加载到我的主index.html页面中，其中包含一个ng-view div，所以同位素有时无法初始化。
它大约是50，如果我刷新同位素工作，它就不工作了，所以这是因为角度还没有准备好渲染DOM。因此，即使我在等待文档就绪(并尝试加载文档)，
浏览 0提问于2016-06-20得票数 0
1回答
当我第一次加载页面时，加载OK，但是当您输入第一个项目之后，然后返回，它不会加载以下的所有同位素项目(大约50个项目)，它会说“没有更多的帖子”，这显然是不正确的。
我得到了这个错误:在初始化之前不能调用同位素方法；尝试调用“追加”
这是我正在做的。
知道问题在哪里吗？这是我的密码：
function initBlog(){
"use strict";
if($j('.blog_holder.masonry').length){
var width_blog = $j(this).closest(
浏览 2提问于2014-11-02得票数 0
回答已采纳
我问第一个问题是因为我对下面的代码非常执着。
基本上:我希望根据特定的内容过滤div可见性。每个div包含几个“标记”。当单击“标记”时，只有包含相同“标记”的div才会显示。看起来很简单，像这样说的。
但我跑进了一个同位素容器里。更重要的是，没有外部标签菜单，因此触发器就在div内，将被切换。
我面临两条路径: 1.再加上盖茨比的一个额外的同位素插件: IsoSelective，它是这样的：
$container.isoSelective({
linkSelector: '.filter', // this is the filter link
att
浏览 4提问于2013-01-03得票数 0
回答已采纳
我计划使用伟大的同位素插件来显示一个接触列表，然后允许它们被过滤。我的问题是，对于一个小的数据集来说，它是很好的，但是我不确定将它扩展到1000+数据块的最佳方法。
到目前为止，我的想法是：
加载随机子集，然后按下筛选器向其添加节点，以填补空白加载更多节点，用户滚动分页结果，直到选择足够多的筛选器将数字降至预定义阈值以下为止。
我不确定这些会不会很好，我希望其他人已经面对这种情况，并能给我一些想法。
浏览 0提问于2012-01-28得票数 9
回答已采纳
2回答
我正在使用jquery同位素和无限滚动，并希望使用图像预加载器
我使用的图像预加载器是：
$('.image').preloader({
loader: '/images_/icons/img_pre.gif',
fadeIn: 700,
delay : 200
});
它在第一页上工作得很好，但是对于无限的滚动项却不能触发，所以我需要把它放在同位素回调的某个地方，但是放在哪里呢？有什么想法吗？
这是我使用的同位素回调代码：
// call Isotope as a callback
function( newElements
浏览 10提问于2012-12-14得票数 2
1回答
延迟加载大数据
、、
我通过ajax从各种资源中获取数据，并将它们显示在页面jQuery.ready()上。同位素在$(window).load(function(){});上的应用。
由于编写这些资源需要时间，因此应用同位素砖石视图需要时间。从HTML页面可以看出这一点。因此，作为替代，我在jQuery.ready() => set同位素上获取了$(window).load(function(){}); =>上的4-5资源，然后从jQuery.load()上的rest资源中获取数据。
但是，load()中的任何调用都不会发生。
对于这种延迟加载(或者更确切地说是延迟调用)，我应该做些什么？
浏览 3提问于2013-05-24得票数 0
1回答
我在这里面临一个问题。我在两页中使用类似的代码进行过滤
$('#filter a')[<number>].click()是触发机制。在页面加载时，在10秒后自动触发，或者在10秒前手动干预。
当页面加载时，将显示$('.portfolio_block')中的默认项集，其余项为display:none。
在第一页上，第一次过滤正常工作。在filteredItems中添加项目、隐藏元素、显示动画和显示元素。这里没问题
但是在第二页中，项目被添加，元素被隐藏。机械装置停在这里。这只会在第一次触发时发生。从第二次触发的病房，它回到正常运作
浏览 3提问于2016-04-22得票数 0
2回答
我试图模仿JQuery的同位素插入的过滤功能，因为我需要过滤图像，但是，实际上使用同位素会给页面上的一些视差尖头元素带来问题。
我编写了这个简短的JQuery片段来切换没有数据属性data-filter的图像。除了Packery插件在不匹配的条目被删除后不会重新排序这一事实之外，它还可以正常工作。
我遇到的问题是，一旦单击了另一个筛选器链接，就需要重新设置过滤器，就好像单击了另一个筛选器一样，然后第一个筛选的元素就消失了，所有其他元素(除外)过滤后的元素都会被返回。我确信解决方案很简单，但是我对JQuery的知识非常有限，所以不知道如何处理这个问题。
代码
$("#filters a&
浏览 4提问于2013-12-31得票数 0
回答已采纳
2回答
几天前，我尝试将同位素整合到我的站点中，并将它与Fancybox 2结合起来，创建一个外观漂亮的图库，提供过滤/排序的可能性。由于许多页面包含大量图像，所以我更喜欢在每个图像完成加载后直接显示和追加图像，而不是在加载完所有图像之前显示加载程序。
为了实现这一点，我到目前为止想出了一段代码：
$( function() {
// init isotope
var $container = $('.isotope_container').isotope({
itemSelector: '.isotope_image',
layou
浏览 2提问于2015-02-02得票数 0
回答已采纳
2回答
我很难弄清楚为什么和如何调整同位素的高度。
我有一个带有产品的页面，列底部的一些按钮被下一行的图像略为覆盖。我在想，如果我能确定同位素的高度，它可能会解决这个问题。
目前，它看起来是宽度和高度是动态声明。我不太确定这是Javascript问题，还是我可以用CSS修复。
对不起，我没有太多的代码要显示，但这是浏览器中显示的内联样式：
<div class="col-xs-12 col-sm-6 col-md-4 isotope-item" data-filter="Digital" style="position: absolute; l
浏览 0提问于2020-02-21得票数 1
1回答
我和webpack在用同位素。正在实例化同位素，但过滤不起作用。代码如下：
var Isotope = require('isotope-layout');
export const Advices = {
init: function(){
var $iso = new Isotope( '.advices-list', {
itemSelector: '.advice-item',
percentPosition: true,
layoutMod
浏览 0提问于2019-10-22得票数 0
同位素预装了一个Wordpress主题。一切正常，但是通过过滤，布局表格被打碎，所以有洞。显然，这是因为项目的总数。
带滤镜:图片库：
对这个问题有什么想法？
请注意，我没有限制要显示的项的数量。提前感谢您的帮助。关于Mathieu
浏览 2提问于2012-08-16得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
