Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 29a2c1a

Browse files
submit info
1 parent 0f8f380 commit 29a2c1a

File tree

5 files changed

+243
-1
lines changed

5 files changed

+243
-1
lines changed

‎WEEK8/SINA/css/index.less‎

Lines changed: 105 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,4 +217,108 @@ html, body {
217217
}
218218
}
219219
}
220-
}
220+
}
221+
222+
/*--NEWS--*/
223+
.news {
224+
padding: 0 .2rem;
225+
background: #FFF;
226+
227+
.item {
228+
li {
229+
padding: .2rem 0;
230+
border-bottom: .02rem solid #DDD;
231+
a {
232+
display: block;
233+
position: relative;
234+
235+
img {
236+
position: absolute;
237+
top: 0;
238+
left: 0;
239+
width: 2rem;
240+
height: 1.34rem;
241+
}
242+
243+
div {
244+
margin-left: 2.2rem;
245+
p {
246+
font-size: .34rem;
247+
line-height: .48rem;
248+
color: #555;
249+
}
250+
span {
251+
display: block;
252+
line-height: .3rem;
253+
text-align: right;
254+
color: #888;
255+
font-size: .22rem;
256+
vertical-align: middle;
257+
258+
i {
259+
margin-left: .1rem;
260+
font-size: .24rem;
261+
vertical-align: middle;
262+
}
263+
}
264+
}
265+
}
266+
}
267+
}
268+
269+
.image {
270+
padding: .2rem 0;
271+
border-bottom: .02rem solid #DDD;
272+
273+
a {
274+
display: block;
275+
}
276+
277+
p {
278+
font-size: .34rem;
279+
line-height: .48rem;
280+
color: #555;
281+
text-overflow: ellipsis;
282+
white-space: nowrap;
283+
overflow: hidden;
284+
}
285+
286+
div {
287+
margin: .3rem 0;
288+
img {
289+
float: left;
290+
width: 32%;
291+
height: 1.24rem;
292+
293+
&:not(:nth-last-of-type(1)) {
294+
margin-right: 2%;
295+
}
296+
}
297+
}
298+
299+
span {
300+
display: block;
301+
line-height: .3rem;
302+
text-align: right;
303+
color: #888;
304+
font-size: .22rem;
305+
vertical-align: middle;
306+
307+
i {
308+
margin-left: .1rem;
309+
font-size: .24rem;
310+
vertical-align: middle;
311+
}
312+
}
313+
}
314+
}
315+
316+
317+
318+
319+
320+
321+
322+
323+
324+

‎WEEK8/SINA/images/news.jpg‎

30.6 KB
Loading[フレーム]

‎WEEK8/SINA/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,27 @@ <h1>新浪网<a href="" class="icon-logo"></a></h1>
6565
<!--<li><a href="">沪指跌0.1%雄安股跳水</a></li>-->
6666
</ul>
6767
</aside>
68+
69+
<section class="news">
70+
<!--<ul class="item">
71+
<li><a href="">
72+
<img src="images/news.jpg" alt="">
73+
<div>
74+
<p>房企再次涌入三四线市场 持续性待考</p>
75+
<span>29万<i class="icon-comment"></i></span>
76+
</div>
77+
</a></li>
78+
</ul>-->
79+
<!--<div class="image">
80+
<p>房企再次涌入三四线市场 持续性待考</p>
81+
<div class="clearfix">
82+
<img src="images/news.jpg" alt="">
83+
<img src="images/news.jpg" alt="">
84+
<img src="images/news.jpg" alt="">
85+
</div>
86+
<span>29万<i class="icon-comment"></i></span>
87+
</div>-->
88+
</section>
6889
</main>
6990

7091
<!--IMPORT JS-->

‎WEEK8/SINA/js/index.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,81 @@ let asideRender = (()=> {
137137
})();
138138
asideRender.init();
139139

140+
/*--NEWS--*/
141+
let newsRender = (()=> {
142+
let $news = $('.news'),
143+
$plan = $.Callbacks();
144+
145+
let fn = (result)=> {
146+
let newsList = result['newsList'],
147+
imgList = result['imgList'];
148+
let str = ``;
149+
str += `<ul class="item">`;
150+
$.each(newsList, function () {
151+
str += `<li><a href="${this.link}">
152+
<img src="${this.img}" alt="">
153+
<div>
154+
<p>${this.title}</p>
155+
<span>
156+
${this.count}
157+
<i class="icon-comment"></i>
158+
</span>
159+
</div>
160+
</a></li>`;
161+
});
162+
str += `</ul>`;
163+
164+
str += `<div class="image">`;
165+
str += `<a href="${imgList.link}">`;
166+
str += `<p>${imgList.title}</p>`;
167+
str += `<div class="clearfix">`;
168+
$.each(imgList.img, function () {
169+
str += `<img src="${this}" alt="">`;
170+
});
171+
str += `</div>`;
172+
str += `<span>
173+
${imgList.count}
174+
<i class="icon-comment"></i>
175+
</span>`;
176+
str += `</a>`;
177+
str += `</div>`;
178+
$news.append(str);
179+
180+
$(window).on('scroll', loadMore);
181+
};
182+
183+
let loadMore = ()=> {
184+
let clientH = document.documentElement.clientHeight,
185+
scrollT = document.documentElement.scrollTop || document.body.scrollTop,
186+
winH = document.documentElement.scrollHeight || document.body.scrollHeight;
187+
if (clientH + scrollT + 10 > winH) {
188+
//->加载更多数据
189+
$(window).off('scroll', loadMore);
190+
$.ajax({
191+
url: 'news.json',
192+
method: 'get',
193+
dataType: 'json',
194+
cache: false,
195+
success: fn
196+
});
197+
}
198+
};
199+
200+
$plan.add(fn);
201+
202+
return {
203+
init(){
204+
$.ajax({
205+
url: 'news.json',
206+
method: 'get',
207+
dataType: 'json',
208+
cache: false,
209+
success: $plan.fire
210+
});
211+
}
212+
}
213+
})();
214+
newsRender.init();
140215

141216

142217

‎WEEK8/SINA/news.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"newsList": [
3+
{
4+
"id": 1,
5+
"img": "images/news.jpg",
6+
"title": "房企再次涌入三四线市场 持续性待考",
7+
"count": "39万",
8+
"link": ""
9+
},
10+
{
11+
"id": 1,
12+
"img": "images/news.jpg",
13+
"title": "房企再次涌入三四线市场 持续性待考",
14+
"count": "39万",
15+
"link": ""
16+
},
17+
{
18+
"id": 1,
19+
"img": "images/news.jpg",
20+
"title": "房企再次涌入三四线市场 持续性待考",
21+
"count": "39万",
22+
"link": ""
23+
},
24+
{
25+
"id": 1,
26+
"img": "images/news.jpg",
27+
"title": "房企再次涌入三四线市场 持续性待考",
28+
"count": "39万",
29+
"link": ""
30+
}
31+
],
32+
"imgList": {
33+
"title": "房企再次涌入三四线市场 持续性待考",
34+
"img": [
35+
"images/news.jpg",
36+
"images/news.jpg",
37+
"images/news.jpg"
38+
],
39+
"count": "20万",
40+
"link": ""
41+
}
42+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /