我一直在与Isotope挣扎一段时间.经过几次不同的会议后,我似乎无法想出这一个.
isotope.metafizzy.co/index.html
我将用图像说明我的问题,但这是解释.正如你在我的网站上看到的那样,
test.davewhitley.com/not-wp/isotope_test/index.php
我正在使用具有三个相同宽度列的同位素.
如果查看中心布局的外边缘,可以看到有一些填充,迫使整个中心比页眉/页脚稍窄一些.我已经使用CSS了解我的内容,但我无法弄清楚如何将中央画廊扩展到包含它的div的边缘(它是960px - 因此,中央画廊大约是940px).通常我只用div和一些CSS就可以做到这一点,但是砌体的javascript是我的头脑(所有的计算等等).任何帮助将不胜感激.
这是我的问题说明.是)我有的:
http://farm7.static.flickr.com/6207/6057816365_e0b6e2e8c4.jpg
我想要的是什么:
http://farm7.static.flickr.com/6208/6058362460_d1200a1491.jpg
对于链接图像和非超链接文本,我很抱歉这个网站太年轻了.
我在网站上使用Packery.js [ http://packery.metafizzy.co/ ]并且在页面加载时遇到一些布局问题.我查看了Mason,Isotope和Packery的文档(所有非常相似的插件,全部由David DeSandro开发),并讨论了在加载所有图像以及任何webfonts之后应该触发布局的问题.
http://packery.metafizzy.co/appendix.html
我的Packery工作得很好,只能使用imagesLoaded ......但我不确定如何将Google Web Font加载器与之配合使用.下面是我加载字体的代码,后面是imagesLoaded Packery Layout.如果任何人都可以建议在Web字体和图像加载之后让Packery解雇,我将永远感激不尽.
// before <body>
<script type="text/javascript">
WebFontConfig = {
google: {
families: [ 'Bitter:400,700,400italic:latin' ]
},
typekit: {
id: // hidden for obvious reasons
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
// after </body>
// jquery and plugins are loaded prior to the …typekit jquery-masonry jquery-isotope webfont-loader packery
我正在使用jQuery Isotope创建一个水平布局,将DIV彼此相邻的100%高度对齐,并将每个DIV中的图像垂直对齐.因此,我称之为Isotope就像这样,Chrome(本地)的一切正常:
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector : '.itemwrap',
layoutMode: 'horizontal',
horizontal: {
verticalAlignment: 0.5
}
});
});
由于图像需要时间加载,它们往往会弄乱Isotope布局,所以我正在尝试使用imagesLoaded修复:http://isotope.metafizzy.co/appendix.html
我实现了这样的修复:
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.itemwrap',
layoutMode: 'horizontal',
horizontal: {
verticalAlignment: 0.5
}
});
});
});
使用此图像加载,同位素不再加载.删除imagesLoaded,Isotope再次启动(但是混乱的布局).有谁知道,错误在哪里？
谢谢!
有没有办法让同位素填充一行中的所有空白区域？
容器具有固定的宽度和3种不同类型的盒子(3个宽度和固定高度).我看到3种可能的解决方案
使同位素在列表中进一步查看并确定合并盒子的最佳方法,以便减少空白区域,并且这些空间都位于容器的底部.在这种情况下,我们需要足够不同尺寸的盒子.
调整一些框的大小并移动它们以使行总是满的.
在将盒子及其尺寸放入容器之前检测它们的数量并改变它们中的一些尺寸,因此有各种尺寸,希望同位素具有较少的带有白色空间的行.
我希望有人可以把我放在正确的方向
我有一个同位素项目,当有人在里面评论时它会增长.当它生长时,我如何告诉主同位素容器随之生长？现在正在发生的事情是,随着同位素项的增长,同位素容器保持它在调用$(".home_main")时设置的初始高度.同位素(); 因此,当我在同位素项中留下注释时,项目会增长,然后被主容器切断.谢谢.
我已经看到你可以设置,resizesContainer: true但这对我没有帮助.谢谢.
不确定它是否有任何区别,但我也尝试使用Masonry jquery插件(看起来非常相似)并且遇到了同样的问题.
我在相同的页面中使用同位素过滤器和无限滚动插件,因此这两者都不能完美地工作,一些设计问题反映了同位素jQuery文件.当我在滚动中单击更多按钮时,它会更好地发布,但未正确放置.它落后于旧职位.我现在还无法找到解决方案.如果有任何人有同样的问题,并发现任何想法,请随时回答我的问题.
这是我的同位素过滤器的jQuery函数
$(function(){
// Orginal function by Alien51
var $container = $('#container');
$container.isotope({
masonry: {
columnWidth: 80
},
sortBy: 'number',
getSortData: {
number: function( $elem ) {
var number = $elem.hasClass('element') ?
$elem.find('.number').text() :
$elem.attr('data-number');
return parseInt( number, 10 );
},
alphabetical: function( $elem ) {
var name = $elem.find('.name'),
itemText = name.length ? name : $elem;
return itemText.text();
}
}
});
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already …使用同位素,通过zonear扩展perfectMasonry
到目前为止看起来它运作良好,我想知道是否有人知道如何集中容器.尝试用css没有运气.原始同位素以砖石为中心
任何人？谢谢
>>更新<<
新同位素(v2)已经出局,它使用名为packery的布局模式完成 "完美砌体"位.新的同位素版本也是中心砖石/同位素.但我实际上并没有使用,fitWidth因为我只是使用bootstrap和同位素应用在顶部以在布局开始时获得居中的砌体(对于那种用途,不对中过滤tho,为此fitWidth)
ajax取出的正常同位素使用正在起作用.看工作jsfiddle.
同位素与懒惰通过ajax取不起作用.看问题jsfiddle.
问题: lazyload不会触发并继续显示灰色图像.
用于lazyload设置的javaScript:
$(document).ready(function () {
//
// initialize at ready ;
//
$container.isotope({
itemSelector: '.box',
columnWidth: function (containerWidth) {
return containerWidth / 12;
},
onLayout: function () {
$win.trigger("scroll");
}
});
//
// here i will be using data through api
// For now I am defining json manually
// var json is defined at top of this code
// considering json return was success
//$.getJSON(APIURL, function (json) {
var newElements = ""; …我在谷歌浏览器中使用同位素,所有项目包含:
-webkit-transform: translate3d(properties);
每个偶数元素[2,4,6,8,10,12,14 ...]在chrome中都是模糊的,在firefox中一切都还可以
以下是第一个元素的属性:
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(225px, 0px, 0px);
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(450px, 0px, 0px);
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(675px, 0px, 0px);
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(900px, 0px, 0px);
position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 183px, 0px);
我试过使用-webkit-transform:scale3d(0.5,0.5,1); 但它不起作用
因此，我的项目可以具有多个用于过滤的类。像这样：
<div class="items>
<div class="item category-1 category-2">An item that displays initially.</div>
<div class="item category-1 category-2 initially-hidden">An item that is initially hidden.</div>
<div class="item category-1 category-2">An item that displays initially.</div>
<div class="item category-1 category-2 initially-hidden">An item that is initially hidden.</div>
<div class="item category-1 category-2">An item that displays initially.</div>
</div>
使用同位素，如何在页面加载时隐藏具有特定类的项目？假设我要隐藏任何类别为带initially-hidden负载的项目，但是当我单击该项目具有的其他任何类别的过滤器时，仍然能够显示该项目？对于上面的示例代码，说我单击了一个category-2过滤器，那么所有具有category-2（即使具有initially-hidden）的项目都会出现吗？
基本上在我正在处理的项目中，客户端希望能够最初在页面加载时隐藏项目，但是在过滤时显示它们。因此，我为她创建了一种使用标记这些内容的方法initially-hidden，但无法绕过如何最初隐藏它们的想法，但是当单击关联的过滤器时，仍然允许它们显示出来。
我已经通过desandro 遇到了这个小提琴，但这并不是我要找的东西，因为它假定每个项目只有一个类（红色，绿色或蓝色）。
编辑
这是我编辑过的desandro小提琴的一部分，它更像我的情况（项目可以有多个类）。小提琴。
最终编辑
答案似乎是相反的，添加一个initially-shown类并过滤页面加载时的那些类。因此，没有让我的客户将所有内容都标记为initially-shown，而是使用了这种方法：
$container.find('.tile:not(.initially-hidden)').addClass('initially-shown');
因为它们有数百个项目，而且似乎只藏了极少数。
这是最新的小提琴。
jquery-isotope ×10
jquery ×8
javascript ×2
css ×1
html ×1
imagesloaded ×1
jquery-1.7 ×1
packery ×1
typekit ×1
width ×1