标题几乎说了一切,我确实从砌体中查看了图像插件但我没有运气,我想知道是否有人可以提供帮助？
脚本做了很多事情,它有过滤器位,动画,显示/隐藏,ajax来获取内容等等.如果有人可以调查它为什么重叠以及我如何能够基于它解决它,我会很高兴.代码如下:
jQuery(function(){
jQuery('#container').masonry({
itemSelector: '.box',
animate: true
});
});
(function ($) {
// Get all menu items with IDs starting with "filter-" and loop over them
$(".menu li[id|=filter]").each(function () {
// Get the ID add extract the page class name from it (remove "filter-" from it)
var type = $(this).attr("id").replace("filter-", "");
// Get the items in the "webbies" list with that class name
var items = $("#container div[class~=" + type + "]");
// Don't do anything if there aren't …我正在构建一个利用David DeSandro的精彩Isotope插件的photoblog,但我很难让插件在响应/流体网格中按预期工作.
www.lewismalpas.co.uk/tumblr(演示)
每个图像都包含在一个div(.item)中,其明确的宽度为25%,因为图像很灵活,理论上这应该允许四个图像内联显示,但是目前只有两个图像被显示,我似乎无法看到找出问题所在.
<script type="text/javascript">
$(document).ready(function(){
//scroll to top of page
$("a.top").click(function () {
$("body,html").animate({scrollTop: 0}, 800);
return false;
});
//Isotope settings
var $container = $('.images')
$container.imagesLoaded( function(){
$container.isotope({
resizable: false, // disable normal resizing
masonry: { columnWidth: $container.width() / 4 }
});
// update columnWidth on window resize
$(window).smartresize(function(){
$container.isotope({
masonry: { columnWidth: $container.width() / 4 }
});
});
});
//layout & search options
$(".header #layout").hide();
$(".header a.layout").click(function() {
$(".header #layout").fadeIn();
$(".header a.fullscreen").click(function() {
$("a.layout-option").removeClass("selected");
$(this).addClass("selected");
$("#container").animate({width:"99%"}, function() …jquery jquery-plugins jquery-masonry jquery-isotope responsive-design
我是编程(javascript)的新手,但过去几天我做了很多研究,以使我的tumblr主题正常工作.我知道我的问题很常见,但似乎我没有足够的知识来正确整合许多类似例子中给出的代码部分.
我的主题应该覆盖tumblr的"每页15个帖子"限制,并且通过"无限滚动"选项,它应该将我的所有帖子(所有这些图片)放在一个无尽的页面中.嗯,事实并非如此.在这里得到一点帮助后,我设法将我的{block:Posts}包裹起来,然后在砌体()调用中进行了几次随机更改我最终得到了这个
你可以看到我的图片没有重叠(最后!)但是在15个帖子之后,它看起来像是创建了一个新页面并且最后的图片没有正确对齐.
我的jQuery砌体代码是这样的:
<script type="text/javascript">
$(window).load(function () {
$('.autopagerize_page_element').masonry(),
$('.autopagerize_page_element').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".autopagerize_page_element",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 12000,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
);
});
</script>
我知道,它是一团糟...真的很感激一些帮助.
我读到了关于砌体的建议,并且在未能将图像附加到工作后,建议切换到继承人Isotope.我试图在专辑封面库中改进或创建变体,这是我在使用相同的PHP类之前做过一两次的事情.
我可以使用基本功能,但单击添加更多图像的按钮始终无法正常工作.我一直在阅读jQuery文档,并且我尝试了各种JavaScript调试器,但是当我点击时,我总是最终没有将图像添加到我的库中.
为了获得最佳外观布局,绝对需要试验和错误.
最大的专辑封面似乎是500像素,API中最小的是75,选择正确的列宽帮助.我目前正在使用75但50可能效果更好.我只是想添加图像来完成这项小实验.
我想尝试类似于将更多图像添加到底部的技术.我想添加更多专辑封面,我使用PHP从各种API(亚马逊产品API,Last.fm,iTunes)获取.所有专辑封面都来自API,我使用PHP查找给出专辑标题和艺术家的URL.我的代码正在运行:http://www.muschamp.ca/Muskie/cdCoverGalleryV4.php
我已多次更改CSS规则,现在我只有Isotope作者建议的默认CSS.
PHP代码循环并产生10个div,每个div有一个图像
$myAlbumCollection->randomMember();
$count = 0;
print('<div id="container">');
while ( $count < 10 )
{
// Check that current album is in Amazon
$buyLink = $myAlbumCollection->currentAlbumAmazonProductURL();
$imageURL = $myAlbumCollection->currentAlbumRandomImageURL();
if ( (strcmp($buyLink, '#') != 0) && (strcmp($imageURL, myInfo::MISSING_COVER_URL) != 0))
{
$count++;
print('<div class="item">');
print('<a href="' . $buyLink . '">');
print('<img src="' . $imageURL . '" />');
print('</a>');
print('</div>');
}
$myAlbumCollection->goToNextAlbum(); // This could loop forever if it doesn't find …Masonry/Isotope/Freetile和其他人在网格/容器中的绝对定位元素上做得很好.
但是,当元素占据网格/容器的整个宽度时,会产生大量间隙,这是不可接受的结果.
这是我的问题的一个问题:http: //jsfiddle.net/QNf3A/1/
红色顶部有足够的空间放置一个绿色的.然而,不同的图书馆倾向于尊重流程,而不是"不留空隙"的理念.
有没有人知道替代js库或类似的技巧,以避免差距？
-
来自jsfiddle的代码......
HTML:
<div id="container">
<div class="block half"></div>
<div class="block full"></div>
<div class="block half"></div>
<div class="block half"></div>
<div class="block half"></div>
</div>
CSS:
#container{
width: 600px;
background-color: #EEE;
}
.block{
float: left;
}
.half{
width: 300px;
height: 100px;
background-color: #CFC;
}
.full{
width: 600px;
height: 100px;
background-color: #FCC;
}
JS/jQuery的:
$(function($) {
$('#container').masonry({
itemSelector: '.block',
columnWidth: 300
});
});
好的工作人员如下,当页面完成加载,砌体失败,我不知道为什么,但我发现一个方法是masonry.reload.
这种方法有时候有用,我想知道为什么.
var $container = $('.container');
$container.masonry({
itemSelector: '.item',
columnWidth: 25
}).imagesLoaded(function(){
$container.masonry('reload');
});
我正在使用jquery Masonry插件,并希望隐藏所有内容,直到插件触发后.默认情况下,砌体会在触发之前加载所有图像.我想显示一个'loading'div,直到插件被触发.我已经实现了一个检查分辨率高于1024px的页面,然后在页面加载时显示"加载"div,但现在页面内容出现在插件触发之前.
<script>
$(document).ready(function() {
$('#content').show();
$('#loading').hide();
});
$(function(){
var $container = $('#container');
var width = $(window).width();
var height = $(window).height();
if ((width > 1024 )) {
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.box',
columnWidth: 120,
});
});
}
else {
//load the css styles for screen res below 1024
}
});
</script>
正如您所看到的,内容出现与插件触发之间存在延迟.希望有人可以帮助我在触发后延迟内容出现单位？
干杯 - 杰西
我正在制作一个简单的小网站,为Reddit帖子应用不同的格式化风格,我正在尝试添加无限滚动jQuery插件,但它没有做任何事情.我尝试按照无限滚动页面上的(非常简单的)指令,当它没有做任何事情时,我认为我必须输入错误的东西,但后来我只是复制/粘贴了Masonry/Infinite-Scroll 示例中的代码,它仍然无法正常工作.砌体工作完美(最后)但我无法弄清楚无限滚动有什么问题.我理解jQuery和JavaScript的基础知识,但显然没有大多数人那么多,所以请你帮帮我,让我知道什么是错的？我的网站是在reddit.ymindustries.com上发布的.
谢谢你们,到目前为止你们很少让我失望.
YM
编辑:如果没有足够的图像填满主页上的页面,请访问reddit.ymindustries.com/r/aww获取更多图像.
编辑2:我相信我找到了问题,它在这里描述:https://github.com/paulirish/infinite-scroll/issues/5 现在找出一个修复...
编辑3:添加了一点点黑客,使它有点工作,但它似乎现在无休止地循环第二页.嗯...
我有一个包含图像列表的xml文件,我希望将这些图像加载到容器中然后应用砌体.
我试图等待图片加载,http://masonry.desandro.com/demos/images.html.每次添加图片后我都会尝试重新加载 - http://masonry.desandro.com/docs/methods.html#reload
这些都不起作用.
这是我的代码,我不知道我哪里出错了.
$('.content').masonry();
var elements = '';
$.ajax({
type: "GET",
url: "/galleries/_archive/PhotoGallery.xml", // replace with absolute URL of your gallery's xml file
dataType: "xml",
success: function(xml) {
jQuery(xml).find('img').each(function(i) {
var location = "/galleries/_archive/"; // replace with absolute path to the directory that holds your images
var url = jQuery(this).attr('src');
var alt = jQuery(this).attr('alt');
elements+= '<div class="image-div"><img class="round'+i+'" src="'+location+''+url+'" alt="'+alt+'"/></div>';
});
$('.content').append(elements).shuffle().masonry('reload');
//$(".content .image-div").shuffle();
}
});
我看过这个 - jquery,在追加完成之后的砌体和 这个jQuery Masonry和Ajax追加项目？
我只是想知道重载是否应该插件等待图片加载？如果是这样的话语法是什么？
我还计划隐藏块(可见性:隐藏),将它们随机排列,然后将它们砌成,然后将它们淡入. …
所以我使用jQuery Masonry,我想在每次加载帖子时调用一些jQuery:
function manipulate(id) {
$(id).each(function(){
if($(this).height()>200){
$('#container2').append(this);
} else{
$('#container').append(this);
};
});
};
因此,我希望每次加载Masonry容器中的下一个项目时调用此函数.这样它以正确的方式操纵项目.我怎么做？
更新:砌体的描述
Masonry是一个Javascript插件,就像CSS浮动强制完美契合+无限滚动.如果没有无限滚动,它会完全隐藏第1页上不会出现的所有内容,然后在必要时加载它们.这意味着我的功能不会影响任何隐藏的项目,只要Masonry加载下一组项目以便它们出现在正确的位置,就需要调用它.这可能意味着在不了解砌体的情况下,您不一定能够解决我的问题,但您仍然可以.最后,Masonry将物品"追加"到砌体容器中,然后"显示"它们.所以我想我需要做的是将它们附加到砌体容器后附加到正确的容器上,但是在它被显示之前.
砌体代码:
$(window).load(function(){
var $wall = $('#container');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '#entry, #entry_photo',
isAnimated : false
});
});
$wall.infinitescroll({
navSelector : '#page-nav',
nextSelector : '#page-nav a',
itemSelector : '.entry, .entry_photo',
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#infscr-loading').fadeOut('normal');
}},
function(newElements) {
var $newElems = $(newElements);
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
});
}); $('.entry').show(500);
});
我已经尝试将该函数放入Masonry块中,甚至作为$newElems函数来查看当更多图像加载时它是否会起作用,但它没有,并且实际上有点打破了它.
我怎样才能让它通过我的jQuery运行Masonry加载的所有新元素,以便它们被附加到正确的容器中？