Skip to content

Commit

Permalink
解决masonry瀑布流再次加载布局错位问题
Browse files Browse the repository at this point in the history 
每次添加节点调用销毁方法：父节点.masonry().masonry("destroy");
  • Loading branch information
717449318@qq.com committed Oct 27, 2016
1 parent fd33955 commit 98a0821
Show file tree
Hide file tree
Showing 11 changed files with 150 additions and 56 deletions.
Binary file modified iwk/WebRoot/WEB-INF/classes/com/iweike/action/wVideoAction.class
View file
Binary file not shown.
Binary file modified iwk/WebRoot/WEB-INF/classes/com/iweike/daoimpl/IwkDaoImpl.class
View file
Binary file not shown.
Binary file modified iwk/WebRoot/WEB-INF/classes/com/iweike/daoimpl/Iwk_videoDaoImpl.class
View file
Binary file not shown.
Binary file modified iwk/WebRoot/WEB-INF/classes/com/iweike/daoimpl/Test.class
View file
Binary file not shown.
126 changes: 90 additions & 36 deletions iwk/WebRoot/allVideos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,8 @@
<link href="css/responsive.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/colors.css" rel="stylesheet">
<style type="text/css">
.grid {
max-width: 1200px;
}
/* clearfix */

.grid:after {
content: '';
display: block;
clear: both;
}
</style>


</head>

<body>
Expand Down Expand Up @@ -142,15 +132,22 @@ <h4 class="modal-title">会员登录</h4>
<div id="wrapper" style="padding-bottom: 50px;">

<div class="container my_container">

<!--下拉菜單****************************************************************************-->
<div id="my_btn_group" class="btn-group">
<button type="button" class="btn btn-default"><font>全部</font><span class="badge">1</span></button>
<button type="button" class="btn btn-primary"><font>环境建设</font><span class="badge">2</span></button>
<button type="button" class="btn btn-danger"><font>美术</font><span class="badge">3</span></button>
<button type="button" class="btn btn-info"><font>计算机</font><span class="badge">4</span></button>
</div>

<!--最新上传视频****************************************************************************-->
<div class="well well-filters">
<div class="pull-left">
<h4>最新上传视频</h4>
</div>
<div class="clearfix"></div>
<div class="page-header">
<h1><small>全部</small></h1>
</div>
<hr style="height:10px;background-color:rebeccapurple;margin-top:-40px">

<div class="row masonry-container" id="myLastVideo">
<div class="row" id="myVideos">

<div class="col-sm-4 col-md-3 col-lg-3">
<!--<div class="well well-sm">
Expand Down Expand Up @@ -179,7 +176,7 @@ <h4>最新上传视频</h4>

</div>
<!--加载更多div-------------------------------------------------------------------------------->
<div class="grid row"></div>
<div class="myGrid"></div>
<!--加载更多DIV-------------------------------------------------------------------------------->

<div class="row loadMore">
Expand All @@ -190,6 +187,9 @@ <h4>最新上传视频</h4>
<div id="loadMoreA" class="well well-sm" style="text-align: center;">
<a href="javascript:void(0);">加载更多</a>
</div>
<div class="well well-sm" style="text-align: center;">
<a href="#">返回顶部</a>
</div>
</div>
</div>
<!-- START 底部================================================== -->
Expand Down Expand Up @@ -224,22 +224,51 @@ <h4>最新上传视频</h4>

<!-- Bootstrap core JavaScript ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/jquery/jquery-3.1.1.min.js"></script>
<!--<script src="js/bootstrap/bootstrap.min.js"></script>-->
<script type="text/javascript" src="js/jquery/jquery.avs-0.2.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
<script src="js/my/variable.js" type="text/javascript" charset="utf-8"></script>
<script src="js/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/imagesLoaded.js" type="text/javascript" charset="utf-8"></script>
<script src="js/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//获取总页数
var maxnum = 0;

var maxnum = 0; //获取总页数
var curPageNum = 0;
var types = "全部"; //视频类型
/*
* 获取该类视频页数
*/
function queryPageNumByTypes(urls, types, Badgeobject) {
var recordNum = 0;
$.ajax({
data: {
types: types
},
type: 'GET',
url: urls,
dataType: 'jsonp',
jsonp: "callback",
success: function(data) {
recordNum = data.jsonStr;
Badgeobject.innerText = recordNum;
},
error: function() {
console.log('网络异常');
}
});

function getPageNum(urls) {
}
/*
* 获取该类视频页数
*/
function getPageNum(urls, types) {
$.ajax({
data: {
types: types
},
type: 'GET',
url: urls,
dataType: 'jsonp',
Expand All @@ -252,11 +281,14 @@ <h4>最新上传视频</h4>
}
});
}
//获取视频列表
function getVideos(urls, parentDiv, curPage) {
/*
* 获取视频列表
*/
function getVideos(urls, parentDiv, curPage, types) {
$.ajax({
data: {
curPage: curPage
curPage: curPage,
types: types
},
type: 'GET',
url: urls,
Expand Down Expand Up @@ -293,7 +325,7 @@ <h4>最新上传视频</h4>
'</div>';
fragment.appendChild(div);
}
// parentDiv.append(fragment);
parentDiv.masonry().masonry("destroy");
myMasonry(parentDiv, $(fragment));

},
Expand All @@ -316,27 +348,49 @@ <h4>最新上传视频</h4>
});

}
//初始获取视频列表
getVideos(myUrl + 'wVideo_queryPageVideo', $("#myLastVideo"), 0);
//获取总页数
getPageNum(myUrl + 'wVideo_queryPageNum');
//初始获取视频列表（url,展示的容器，页数，视频类型）
getVideos(myUrl + 'wVideo_queryPageVideo', $("#myVideos"), 0, "全部");
//获取总页数（url,types）
getPageNum(myUrl + 'wVideo_queryPageNum', "全部");

//加载更多按钮
var myDiv = null;
$("#loadMoreA").click(function() {
curPageNum++;
if(curPageNum < maxnum) {

myDiv = document.createElement('div');
myDiv.className = 'row';
$(".loadMore").before('<div class="page-header"><h1><small>第<font>' + (curPageNum + 1) + '</font>页</small></h1></div><hr style="height:10px;background-color:rebeccapurple;margin-top:-40px">');
$(".loadMore").before($(myDiv));
getVideos(myUrl + 'wVideo_queryPageVideo', $(myDiv), curPageNum);
$(".myGrid").append('<div class="page-header"><h1><small>第<font>' + (curPageNum + 1) + '</font>页</small></h1></div><hr style="height:10px;background-color:rebeccapurple;margin-top:-40px">');
$(".myGrid").append($(myDiv));
getVideos(myUrl + 'wVideo_queryPageVideo', $(myDiv), curPageNum, types);
} else {
$("#loadMoreA").html("沒有更多");
}

});

/*
* 视频类型按钮点击事件
*/
$("#my_btn_group button").click(function() {
console.log("类型==" + $(this).find("font")[0].innerText);
console.log("badge==" + ($(this).find("span")[0].innerText));
$("#loadMoreA").html('<a href="javascript:void(0);">加载更多</a>');
maxnum = 0; //获取总页数
curPageNum = 0;
types = $(this).find("font")[0].innerText; //视频类型
/*
* 获取该类视频记录条数
*/
queryPageNumByTypes(myUrl + 'wVideo_queryPageNumByTypes', types, $(this).find("span")[0]);

//初始获取视频列表（url,展示的容器，页数，视频类型）
$(".myGrid").html("");
getVideos(myUrl + 'wVideo_queryPageVideo', $("#myVideos"), curPageNum, types);
//获取总页数（url,types）
getPageNum(myUrl + 'wVideo_queryPageNum', types);
});
});
</script>
</body>
Expand Down
4 changes: 2 additions & 2 deletions iwk/WebRoot/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ <h4 class="modal-title">会员登录</h4>
<h4>热播视频</h4>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="#">more</a>
<a class="btn btn-primary" href="allVideos.html">more</a>
</div>
<div class="clearfix"></div>
</div>
Expand Down Expand Up @@ -227,7 +227,7 @@ <h4>热播视频</h4>
<h4>最新上传视频</h4>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="#">more</a>
<a class="btn btn-primary" href="allVideos.html">more</a>
</div>
<div class="clearfix"></div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions iwk/WebRoot/js/jquery/jquery-3.1.1.min.js
View file

Large diffs are not rendered by default.

29 changes: 20 additions & 9 deletions iwk/src/com/iweike/action/wVideoAction.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,17 +227,17 @@ public String addVideo() {
String dateSr = sdf.format(date);

video.setId(videoDao.queryLastRecordId() + 1);
video.setTitle(title);
video.setTypes(types);
video.setIntroduce(introduce);
video.setAuthor(author);
video.setTitle(title.trim());
video.setTypes(types.trim());
video.setIntroduce(introduce.trim());
video.setAuthor(author.trim());

video.setPic(backImgPath);// 封面
video.setPic(backImgPath.trim());// 封面
video.setClicks(0);// 点击率
video.setTime(dateSr);// 视频上传时间

video.setSrcs(backVideoPath);
video.setObjId(obj_id);
video.setSrcs(backVideoPath.trim());
video.setObjId(obj_id.trim());
video.setIsShow(0 + "");// 是否上架展示
try {
this.jsonStr = videoDao.save(video) ? "视频添加成功" : "视频添加失败";
Expand Down Expand Up @@ -266,7 +266,7 @@ public String addClicks() {
@SuppressWarnings("unchecked")
public String queryPageVideo() {
try {
JSONArray jsonList = JSONArray.fromObject(videoDao.queryPageVideo(curPage, HOME_PerPageRow));
JSONArray jsonList = JSONArray.fromObject(videoDao.queryPageVideo(curPage, HOME_PerPageRow,"types",types));
this.json = jsonList;
return SUCCESS;
} catch (Exception e) {
Expand All @@ -278,7 +278,18 @@ public String queryPageVideo() {
// 10.获取总页面
public String queryPageNum() {
try {
this.jsonStr =""+(int)Math.ceil(videoDao.queryRecordNum()/HOME_PerPageRow);
this.jsonStr =""+(int)Math.ceil(videoDao.queryRecordNum("types",types)/HOME_PerPageRow);
return SUCCESS;
} catch (Exception e) {
e.printStackTrace();
return ERROR;
}
}

// 10.获取各类视频个数
public String queryPageNumByTypes() {
try {
this.jsonStr =""+(int)videoDao.queryPageNumByTypes("types",types);
return SUCCESS;
} catch (Exception e) {
e.printStackTrace();
Expand Down
21 changes: 18 additions & 3 deletions iwk/src/com/iweike/daoimpl/IwkDaoImpl.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,13 +228,24 @@ public Object queryLastRecordId(Object object) {

// 10.分页查询记录，返回集合；
@SuppressWarnings("unchecked")
public List<Object> query(Object object, int curPage, int max) {
/*
* query
* Object object数据表
* int curPage,当前页数
* int max,每页条数
* String keys,字段
* String values,字段值
*
*/
public List<Object> query(Object object, int curPage, int max,String keys,String values) {

try {

s = HibernateSessionFactory.getSession();

Criteria c = s.createCriteria(object.getClass());
if (!values.equals("全部"))
c.add(Restrictions.eq(keys, values));
c.setFirstResult(curPage * max);
c.setMaxResults(max);

Expand All @@ -248,13 +259,15 @@ public List<Object> query(Object object, int curPage, int max) {

}

// 11.获取该表记录总条数

public double queryRecordNum(Object object) {
// 11.获取该表某类型记录总条数{object表，keys字段，values字段对应值}
public double queryRecordNum(Object object, String keys, Object values) {
String rows = null;
try {
s = HibernateSessionFactory.getSession();
Criteria c = s.createCriteria(object.getClass());
if (!values.equals("全部"))
c.add(Restrictions.eq(keys, values));
// Projections.rowCount() 来取得总记录数
rows = c.setProjection(Projections.rowCount()).uniqueResult()
.toString();
Expand All @@ -267,5 +280,7 @@ public double queryRecordNum(Object object) {
}

}



}
20 changes: 15 additions & 5 deletions iwk/src/com/iweike/daoimpl/Iwk_videoDaoImpl.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,10 +125,10 @@ public int queryLastRecordId() {
}

// 11.分页查询
public List<Video> queryPageVideo(int curPage,int max) {
public List<Video> queryPageVideo(int curPage,int max,String types,String values) {
video=new Video();
try {
return Object2Other(iwkDao.query(video, curPage, max));
return Object2Other(iwkDao.query(video, curPage, max,types,values));
} catch (Exception e) {
System.out.println("Iwk_VideoDaoImpl的queryOrderAsc报错："+e.getMessage());
return null;
Expand All @@ -138,15 +138,25 @@ public List<Video> queryPageVideo(int curPage,int max) {

// 11.获取该表记录总条数

public double queryRecordNum() {
public double queryRecordNum(String types,String values) {
video=new Video();
try {
return iwkDao.queryRecordNum(video);
return iwkDao.queryRecordNum(video,types,values);
} catch (Exception e) {
System.out.println("Iwk_VideoDaoImpl的queryRecordNum报错："+e.getMessage());
return Double.parseDouble(""+0);
}
}

// 12.获取各类视频个数
public double queryPageNumByTypes(String types, String values) {
video=new Video();
try {
return iwkDao.queryRecordNum(video,types,values);
} catch (Exception e) {
System.out.println("Iwk_VideoDaoImpl的queryRecordNum报错："+e.getMessage());
return Double.parseDouble(""+0);
}
}


}
2 changes: 1 addition & 1 deletion iwk/src/com/iweike/daoimpl/Test.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ public static void main(String[] args) {
//
video = new Video();
// 获取时间戳
System.out.println(Math.ceil(videoDao.queryRecordNum()/8));
System.out.println((int)videoDao.queryRecordNum("types","计算机"));

}

Expand Down

0 comments on commit 98a0821

Please sign in to comment.